fix(largevideo): show the background video only for video container type

modules/UI/videolayout/VideoContainer.js

@@ -214,6 +214,13 @@ export class VideoContainer extends LargeContainer {
 
         this.$wrapper = $('#largeVideoWrapper');
 
+        /**
+         * FIXME: currently using parent() because I can't come up with name
+         * for id. We'll need to probably refactor the HTML related to the large
+         * video anyway.
+         */
+        this.$wrapperParent = this.$wrapper.parent();
+
         this.avatarHeight = $("#dominantSpeakerAvatar").height();
 
         var onPlayingCallback = function (event) {
@@ -524,7 +531,7 @@ export class VideoContainer extends LargeContainer {
         }
 
         return new Promise((resolve) => {
-            this.$wrapper.css('visibility', 'visible').fadeTo(
+            this.$wrapperParent.css('visibility', 'visible').fadeTo(
                 FADE_DURATION_MS,
                 1,
                 () => {
@@ -539,15 +546,14 @@ export class VideoContainer extends LargeContainer {
         // as the container is hidden/replaced by another container
         // hide its avatar
         this.showAvatar(false);
-
         // its already hidden
         if (!this.isVisible) {
             return Promise.resolve();
         }
 
         return new Promise((resolve) => {
-            this.$wrapper.fadeTo(FADE_DURATION_MS, 0, () => {
-                this.$wrapper.css('visibility', 'hidden');
+            this.$wrapperParent.fadeTo(FADE_DURATION_MS, 0, () => {
+                this.$wrapperParent.css('visibility', 'hidden');
                 this.isVisible = false;
                 resolve();
             });

react/features/large-video/components/LargeVideo.web.js

@@ -37,17 +37,31 @@ export default class LargeVideo extends Component {
                         src = '' />
                 </div>
                 <span id = 'remoteConnectionMessage' />
-                <div className = 'video_blurred_container'>
-                    <video
-                        autoPlay = { true }
-                        id = 'largeVideoBackground'
-                        muted = 'true' />
-                </div>
-                <div id = 'largeVideoWrapper'>
-                    <video
-                        autoPlay = { true }
-                        id = 'largeVideo'
-                        muted = { true } />
+                <div>
+                    <div className = 'video_blurred_container'>
+                        <video
+                            autoPlay = { true }
+                            id = 'largeVideoBackground'
+                            muted = 'true' />
+                    </div>
+                    {
+
+                        /**
+                         * FIXME: the architecture of elements related to the
+                         * large video and  the naming. The background is not
+                         * part of largeVideoWrapper because we are controlling
+                         * the size of the video through largeVideoWrapper.
+                         * That's why we need another container for the the
+                         * background and the largeVideoWrapper in order to
+                         * hide/show them.
+                         */
+                    }
+                    <div id = 'largeVideoWrapper'>
+                        <video
+                            autoPlay = { true }
+                            id = 'largeVideo'
+                            muted = { true } />
+                    </div>
                 </div>
                 <span id = 'localConnectionMessage' />