2 files changed, 17 insertions, 9 deletions

diff --git a/node_modules/montage-google/youtube-channel.reel/youtube-channel.html b/node_modules/montage-google/youtube-channel.reel/youtube-channel.html
index 99a8a698..112fda72 100644
--- a/node_modules/montage-google/youtube-channel.reel/youtube-channel.html
+++ b/node_modules/montage-google/youtube-channel.reel/youtube-channel.html
@@ -10,7 +10,7 @@
     <script type="text/montage-serialization">
     {
         "player": {
-            "prototype": "montage-google/youtube-player.reel",
+            "prototype": "youtube-player.reel",
             "properties": {
                 "element": {"#": "player"}
             }
@@ -41,7 +41,7 @@
         },
 
         "owner": {
-            "module": "montage-google/youtube-channel.reel",
+            "module": "youtube-channel.reel",
             "name": "YoutubeChannel",
             "properties": {
                 "element": {"#": "container"},
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';
         }
     },