Merge branch 'refs/heads/Ninja-Internal' into Color

1 files changed, 15 insertions, 7 deletions

diff --git a/node_modules/montage-google/youtube-channel.reel/youtube-channel.js b/node_modules/montage-google/youtube-channel.reel/youtube-channel.js
index 18ea7923..782318f0 100644
--- a/node_modules/montage-google/youtube-channel.reel/youtube-channel.js
+++ b/node_modules/montage-google/youtube-channel.reel/youtube-channel.js
@@ -137,6 +137,9 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
             if (this._shouldShowPopup) {
                 this._positionPopup();
 
+                // Need the video to be on top
+                this._element.style.zIndex = 9000;
+
                 // Fix for Canary where the thumbnail in the video doesn't
                 // change until the CSS transition has finished, so wait for
                 // it to change before starting the animation
@@ -163,6 +166,10 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
                     document.removeEventListener('keyup', this);
                 }
 
+                // take the video from the top only once it's stopped animating
+                window.setTimeout(function() {
+                    this._element.style.zIndex = null;
+                }, 500);
             }
 
         }
@@ -175,21 +182,22 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
 
     _positionPopup: {
         value: function() {
+            var doc = this._element.ownerDocument;
 
-            var viewport = this._element.parentNode;
-            var viewportStyle = window.getComputedStyle(viewport);
-
-            this.player.width = viewportStyle.width;
-            this.player.height = viewportStyle.height;
+            this.player.width = doc.width;
+            this.player.height = doc.height;
 
             // // Chrome
             // viewport.insertBefore(this._popupElement, viewport.firstChild);
             // this._popupElement.style.top = viewport.offsetTop;
             // this._popupElement.style.left = viewport.offsetLeft;
 
+            var computedStyle = window.getComputedStyle(doc.body);
+
             // Canary
-            this._popupElement.style.top =  - (this._element.offsetTop || 0) + 'px';
-            this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px';
+            // remove the body margin
+            this._popupElement.style.top =  - (this._element.offsetTop || 0) - parseInt(computedStyle.marginTop, 10) + 'px';
+            this._popupElement.style.left = - (this._element.offsetLeft || 0) - parseInt(computedStyle.marginLeft, 10) + 'px';
         }
     },