Add wrapper

css/_filmstrip.scss

@@ -0,0 +1,76 @@
+.filmstrip {
+    &__videos {
+        @include flex();
+        flex-direction: row-reverse;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+
+        position:absolute;
+        text-align:right;
+        height:196px;
+        padding: 10px 10px 17px 5px;
+        bottom: 0;
+        right: 0;
+        width:auto;
+        border: 2px solid transparent;
+        z-index: 5;
+        transition: bottom 2s;
+        overflow: visible !important;
+        font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/
+
+        &.hidden {
+            bottom: -196px;
+        }
+
+        .videocontainer {
+            display: none;
+            position: relative;
+            background-size: contain;
+            border: 2px solid transparent;
+            border-radius:1px;
+            margin: 0 $thumbnailVideoMargin;
+
+            &.videoContainerFocused, &:hover {
+                cursor: hand;
+            }
+
+            /**
+            * Focused video thumbnail.
+            */
+            &.videoContainerFocused {
+                transition-duration: 0.5s;
+                -webkit-transition-duration: 0.5s;
+                -webkit-animation-name: greyPulse;
+                -webkit-animation-duration: 2s;
+                -webkit-animation-iteration-count: 1;
+                border: 2px solid $videoThumbnailSelected !important;
+                box-shadow: inset 0 0 3px $videoThumbnailSelected,
+                0 0 3px $videoThumbnailSelected !important;
+            }
+
+            /**
+            * Hovered video thumbnail.
+            */
+            &:hover {
+                cursor: hand;
+                border: 2px solid $videoThumbnailHovered;
+                box-shadow: inset 0 0 3px $videoThumbnailHovered,
+                0 0 3px $videoThumbnailHovered;
+            }
+
+            /* With TemasysWebRTC plugin <object/> element is used
+            instead of <video/> */
+            & > video,
+            & > object {
+                cursor: hand;
+                border-radius:1px;
+                object-fit: cover;
+                overflow: hidden;
+            }
+        }
+    }
+}
+
+.filmstripToolbar + #remoteVideos {
+    padding-right: 24px;
+}

css/_videolayout_default.scss

@@ -12,34 +12,6 @@
     overflow: hidden;
 }
 
-#remoteVideos {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    flex-direction: row-reverse;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-
-    position:absolute;
-    text-align:right;
-    height:196px;
-    padding: 10px 10px 17px 5px;
-    bottom: 0;
-    right: 0;
-    width:auto;
-    border: 2px solid transparent;
-    z-index: 5;
-    transition: bottom 2s;
-    overflow: visible !important;
-    font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/
-}
-
-#remotevideos.hidden {
-    bottom: -196px;
-}
-
 .videocontainer {
     position: relative;
     text-align: center;
@@ -52,15 +24,6 @@
     }
 }
 
-#remoteVideos .videocontainer {
-    display: none;
-    position: relative;
-    background-size: contain;
-    border: 2px solid transparent;
-    border-radius:1px;
-    margin: 0 $thumbnailVideoMargin;
-}
-
 /**
  * The toolbar of the video thumbnail.
  */
@@ -96,48 +59,10 @@
     z-index: 2;
 }
 
-#remoteVideos .videocontainer.videoContainerFocused,
-#remoteVideos .videocontainer:hover {
-    cursor: hand;
-}
-/**
- * Focused video thumbnail.
- */
-#remoteVideos .videocontainer.videoContainerFocused {
-    transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    -webkit-animation-name: greyPulse;
-    -webkit-animation-duration: 2s;
-    -webkit-animation-iteration-count: 1;
-    border: 2px solid $videoThumbnailSelected !important;
-    box-shadow: inset 0 0 3px $videoThumbnailSelected,
-                0 0 3px $videoThumbnailSelected !important;
-}
-
-/**
- * Hovered video thumbnail.
- */
-#remoteVideos .videocontainer:hover {
-    cursor: hand;
-    border: 2px solid $videoThumbnailHovered;
-    box-shadow: inset 0 0 3px $videoThumbnailHovered,
-              0 0 3px $videoThumbnailHovered;
-}
-
 #localVideoWrapper {
     display:inline-block;
 }
 
-/* With TemasysWebRTC plugin <object/> element is used
-   instead of <video/> */
-#remoteVideos .videocontainer>video,
-#remoteVideos .videocontainer>object {
-    cursor: hand;
-    border-radius:1px;
-    object-fit: cover;
-    overflow: hidden;
-}
-
 .flipVideoX {
     transform: scale(-1, 1);
     -moz-transform: scale(-1, 1);
@@ -637,8 +562,4 @@
             cursor: pointer;
         }
     }
-}
-
-.filmstripToolbar + #remoteVideos {
-    padding-right: 24px;
 }

css/main.scss

@@ -63,5 +63,6 @@
 @import 'aui-components/dropdown';
 @import '404';
 @import 'policy';
+@import 'filmstrip';
 
 /* Modules END */

index.html

@@ -166,21 +166,23 @@
                     <img id="recordingSpinner" class="recordingSpinner" src="images/spin.svg"></img>
                 </span>
             </div>
-
-            <div id="remoteVideos">
-                <span id="localVideoContainer" class="videocontainer videocontainer_small">
-                    <div class="videocontainer__background"></div>
-                    <span id="localVideoWrapper">
-                        <!--<video id="localVideo" autoplay muted></video> - is now per stream generated -->
+            <div class="filmstrip">
+                <div class="filmstrip__videos" id="remoteVideos">
+                    <span id="localVideoContainer" class="videocontainer videocontainer_small">
+                        <div class="videocontainer__background"></div>
+                        <span id="localVideoWrapper">
+                            <!--<video id="localVideo" autoplay muted></video> - is now per stream generated -->
+                        </span>
+                        <audio id="localAudio" autoplay muted></audio>
+                        <div class="videocontainer__toolbar"></div>
+                        <div class="videocontainer__toptoolbar"></div>
+                        <div class="videocontainer__hoverOverlay"></div>
                     </span>
-                    <audio id="localAudio" autoplay muted></audio>
-                    <div class="videocontainer__toolbar"></div>
-                    <div class="videocontainer__toptoolbar"></div>
-                    <div class="videocontainer__hoverOverlay"></div>
-                </span>
-                <audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
-                <audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
+                    <audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
+                    <audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
+                </div>
             </div>
+
         </div>
     </div>
     <div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">

modules/UI/videolayout/FilmStrip.js

@@ -23,9 +23,9 @@ const FilmStrip = {
      */
     _initFilmStripToolbar() {
         let toolbar = this._generateFilmStripToolbar();
+        let container = document.querySelector('.filmstrip');
 
-        document.querySelector('#videospace')
-            .insertBefore(toolbar, document.querySelector('#remoteVideos'));
+        UIUtil.prependChild(container, toolbar);
 
         let iconSelector = '#hideVideoToolbar i';
         this.toggleFilmStripIcon = document.querySelector(iconSelector);