diff --git a/bottom_toolbar.js b/bottom_toolbar.js
index 65afecbad..8ba87acc0 100644
--- a/bottom_toolbar.js
+++ b/bottom_toolbar.js
@@ -22,7 +22,8 @@ var BottomToolbar = (function (my) {
     };
 
     my.toggleFilmStrip = function() {
-        $("#remoteVideos").toggle("slide", { direction: "down", duration: 700});
+        var filmstrip = $("#remoteVideos");
+        filmstrip.toggleClass("hidden");
     };
 
 
diff --git a/css/videolayout_default.css b/css/videolayout_default.css
index 9067c0ef2..712a4b5f3 100644
--- a/css/videolayout_default.css
+++ b/css/videolayout_default.css
@@ -19,6 +19,11 @@
     width:auto;
     border:1px solid transparent;
     z-index: 5;
+    transition: bottom 2s;
+}
+
+#remotevideos.hidden {
+    bottom: -196px;
 }
 
 .videocontainer {
diff --git a/index.html b/index.html
index ac9777b21..015ef7fe9 100644
--- a/index.html
+++ b/index.html
@@ -53,7 +53,7 @@
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="css/font.css?v=4"/>
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=23"/>
-    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=9" id="videolayout_default"/>
+    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=10" id="videolayout_default"/>
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
     <link rel="stylesheet" href="css/modaldialog.css?v=3">
     <link rel="stylesheet" href="css/popup_menu.css?v=2">