Finish css loading

.gitignore

@@ -71,4 +71,6 @@ player/static/mfr/*
 
 !.gitkeep
 
+node_modules/
+
 .cache

mfr/extensions/video/templates/viewer.mako

@@ -1,3 +1,4 @@
+
 <video controls height="100%">
   <source src="${url}">
   Your browser does not support the video tag.
@@ -7,4 +8,4 @@
 <script src="/static/js/mfr.child.js"></script>
 <script>
     window.pymChild.sendMessage('embed', 'embed-responsive-16by9');
-</script>
+</script>

mfr/server/static/css/mfr.css

@@ -42,14 +42,16 @@ This CSS was stripped out of base.css from the osf-style repo.
     align-items: center;
     width: 100%;
     height: 250px;
+    top: 0;
+    left: 0;
 }
 
 .embed-responsive-pdf {
     padding-bottom: 95%;
 }
 
 #mfrIframe iframe {
-    display: none;
+    opacity: 0.0;
 }
 
 #mfrIframe {

mfr/server/static/js/mfr.child.js

@@ -2,9 +2,9 @@
     'use strict';
     window.pymChild = new pym.Child();
 
+
     window.addEventListener('load', function () {
         window.pymChild.sendHeight();
-
         var anchors = document.getElementsByTagName('a');
         Array.prototype.slice.call(anchors).forEach(function (el) {
             el.addEventListener('click', function (e) {

mfr/server/static/js/mfr.js

@@ -82,7 +82,7 @@
             self.pymParent.el.appendChild(self.spinner);
             $(self.pymParent.iframe).on('load', function() {
                 self.pymParent.el.removeChild(self.spinner);
-                this.style.display = "block"
+                this.style.opacity = "1.0"
             })
 
             self.pymParent.onMessage('embed', function(message) {