Make Youtube video fill the full page

Includes Chrome and Canary code paths for rendering bug fixes

1 files changed, 25 insertions, 0 deletions

diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
index ccbd9978..6cd43a3c 100644
--- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
@@ -111,6 +111,8 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
             this.imageA.element.addEventListener("click", this, false);
             this.imageB.element.addEventListener("click", this, false);
             this.imageC.element.addEventListener("click", this, false);
+
+            this._positionPopup();
         }
     },
 
@@ -133,7 +135,9 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
             }
 
             if (this._shouldShowPopup) {
+                this._positionPopup();
                 this._element.classList.add("show");
+                this._popupElement.classList.add("show");
                 if (window.Touch) {
                     document.addEventListener('touchstart', this, false);
                 } else {
@@ -142,6 +146,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
                 }
             } else {
                 this._element.classList.remove("show");
+                this._popupElement.classList.remove("show");
                 this.player.stop();
 
                 if (window.Touch) {
@@ -161,6 +166,26 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
         value: null
     },
 
+    _positionPopup: {
+        value: function() {
+
+            var viewport = this._element.parentNode;
+            var viewportStyle = window.getComputedStyle(viewport);
+
+            this.player.width = viewportStyle.width;
+            this.player.height = viewportStyle.height;
+
+            // // Chrome
+            viewport.insertBefore(this._popupElement, viewport.firstChild);
+            this._popupElement.style.top = viewport.offsetTop;
+            this._popupElement.style.left = viewport.offsetLeft;
+
+            // Canary
+            // this._popupElement.style.top =  - (this._element.offsetTop || 0) + 'px';
+            // this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px';
+        }
+    },
+
     handleClick: {
         value: function(event) {
             switch(event.target.dataset.montageId) {