resize video player on window resize

plumi · Sep 7, 2012 · 43c55fd · 43c55fd
1 parent 4edc825
commit 43c55fd
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 7 deletions.
diff --git a/em/skin/theme_resources/index.html b/em/skin/theme_resources/index.html
@@ -280,5 +280,22 @@ <h5>Stay In Touch2</h5>
     </div>
     <span id="javascript_at_bottom"></span>      
     <span id="javascript_inline"></span>
+    <script>
+    function resizePlayer(){ 
+        if ($(window).width() < 550 ) {
+            mejs.players[0].setPlayerSize($(window).width()-25,($(window).width()-25)/1.75);
+            mejs.players[0].setControlsSize();
+            $('div.videobar').width($(window).width()-25);
+            $('#featuredvideo .description').width($(window).width()-25);
+            try{ mejs.players[0].setVideoSize($(window).width()-25,($(window).width()-25)/1.75); } catch(err) {}
+        } else {
+            $('#featuredvideo .description').attr('style','');
+            $('div.videobar').attr('style','');
+        }
+    };
+
+    $(document).ready(resizePlayer);
+    $(window).resize(resizePlayer);
+    </script>
 </body>
 </html>
diff --git a/em/skin/theme_resources/stylesheets/foundation.css b/em/skin/theme_resources/stylesheets/foundation.css
@@ -204,32 +204,32 @@ div.news div.social-networks {
     background: #efeff1;
     border-bottom: 1px solid #bbb;
     padding: 8px;
-  }
+}
 
-  div.news div.social-networks span {
+div.news div.social-networks span {
     display: block;
     float: left;
     padding-top: 14px;
     font-weight: bold;
-  }
+}
 
 div.news div.twitter {
     width: 28px;
     height: 28px;
     margin: 4px 0 0 4px;
     background: url(images/twitter.png) center no-repeat;
     float: right;
-  }
+}
 
 div.news div.fb {
     width: 28px;
     height: 28px;
     margin: 4px 0 0 4px;
     background: url(images/facebook.png) center no-repeat;
     float: right;
-  }
+}
 
-  /* Featured Content below Video */
+/* Featured Content below Video */
 
 div.featured-content {
   background: #fdfdfe;
@@ -1837,9 +1837,17 @@ div#video-listings .video span.duration {
 }
 
 @media only screen and (max-width: 985px) {
-   #upper-container div.row.header { background:none; }
+   #upper-container div.row.header { background:none repeat scroll 0 0 #C9CCD1; }
    div.download { display: none; }
    div.unisubs-videoTab { display:none !important; }
    div.video div.rollover, div.video div.rollover p { max-width: 215px; }
    #video-listings div.video, #latestvideos div.video { max-width: 231px; }
+   body.template-featured_videos_homepage #mid-container #featuredvideo .description { 
+       clear: both; 
+       position: inherit;
+       float: none;
+       width: 525px;
+       height: auto;
+       padding-bottom: 10px;
+   }
 }
diff --git a/em/skin/theme_resources/video.html b/em/skin/theme_resources/video.html
@@ -311,6 +311,20 @@ <h5>Stay In Touch</h5>
          return false;
     });
 
+    function resizePlayer(){ 
+        if ($(window).width() < 650 ) {
+            mejs.players[0].setPlayerSize($(window).width()-25,($(window).width()-25)/1.75);
+            mejs.players[0].setControlsSize();
+            $('div.videobar').width($(window).width()-25);
+            try{ mejs.players[0].setVideoSize($(window).width()-25,($(window).width()-25)/1.75); } catch(err) {}
+        } else {
+            $('div.videobar').attr('style','');
+        }
+    };
+
+    $(document).ready(resizePlayer);
+    $(window).resize(resizePlayer);
+
 </script>
 
 </body>