ref(local-video): generate html instead of hardcoding in filmstrip

This would better mimic React behavior where each component has
its own markup, instead of relying on markup existing elsewhere.

modules/UI/videolayout/LocalVideo.js

@@ -17,7 +17,10 @@ const TrackEvents = JitsiMeetJS.events.track;
 
 function LocalVideo(VideoLayout, emitter) {
     this.videoSpanId = "localVideoContainer";
-    this.container = $("#localVideoContainer").get(0);
+
+    this.container = this.createContainer();
+    $("#filmstripLocalVideo").append(this.container);
+
     this.localVideoId = null;
     this.bindHoverHandler();
     if(config.enableLocalVideoFlip)
@@ -46,6 +49,27 @@ function LocalVideo(VideoLayout, emitter) {
 LocalVideo.prototype = Object.create(SmallVideo.prototype);
 LocalVideo.prototype.constructor = LocalVideo;
 
+LocalVideo.prototype.createContainer = function () {
+    const containerSpan = document.createElement('span');
+    containerSpan.classList.add('videocontainer');
+    containerSpan.id = this.videoSpanId;
+
+    containerSpan.innerHTML = `
+        <div class = 'videocontainer__background'></div>
+        <span id = 'localVideoWrapper'></span>
+        <audio
+            autoplay = true
+            id = 'localAudio'
+            muted = true></audio>
+        <div class = 'videocontainer__toolbar'></div>
+        <div class = 'videocontainer__toptoolbar'></div>
+        <div class = 'videocontainer__hoverOverlay'></div>
+        <div class = 'displayNameContainer'></div>
+        <div class = 'avatar-container'></div>`;
+
+    return containerSpan;
+};
+
 /**
  * Sets the display name for the given video span id.
  */

react/features/filmstrip/components/Filmstrip.web.js

@@ -52,23 +52,7 @@ class Filmstrip extends Component {
                     id = 'remoteVideos'>
                     <div
                         className = 'filmstrip__videos'
-                        id = 'filmstripLocalVideo'>
-                        <span
-                            className = 'videocontainer'
-                            id = 'localVideoContainer'>
-                            <div className = 'videocontainer__background' />
-                            <span id = 'localVideoWrapper' />
-                            <audio
-                                autoPlay = { true }
-                                id = 'localAudio'
-                                muted = { true } />
-                            <div className = 'videocontainer__toolbar' />
-                            <div className = 'videocontainer__toptoolbar' />
-                            <div className = 'videocontainer__hoverOverlay' />
-                            <div className = 'displayNameContainer' />
-                            <div className = 'avatar-container' />
-                        </span>
-                    </div>
+                        id = 'filmstripLocalVideo' />
                     <div
                         className = 'filmstrip__videos'
                         id = 'filmstripRemoteVideos'>