fluid video size with fixed ratio of 16/9, fixes #77

hacklabr · Nov 11, 2013 · f815273 · f815273
1 parent 1557901
commit f815273
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/core/templates/base.html b/core/templates/base.html
@@ -23,6 +23,21 @@
     <script type="text/javascript" src="{% static 'js/flatui-checkbox.js' %}" charset="utf-8"></script>
     <script type="text/javascript" src="{% static 'js/flatui-radio.js' %}" charset="utf-8"></script>
 
+    <script type="text/javascript" charset="utf-8">
+        (function(){
+            function resize_player() {
+                $('#youtube-player').css('width','100%')
+                                    .height($('#youtube-player').width() * 0.5625);
+            }
+
+            $(document).ready(function() {
+                $('.has-tooltip').tooltip();
+                $(document).on('DOMNodeInserted','#player-outter', resize_player);
+                resize_player();
+            });
+            $(window).resize(resize_player);
+        })();
+    </script>
     {% endblock %}
 </head>
 <body>
@@ -54,10 +69,5 @@ <h1>missing content block</h1>
         {% endblock %}
     </div>
     {% include 'footer.html' %}
-
-    <script type="text/javascript" charset="utf-8">
-        $(document).ready(function() {$('.has-tooltip').tooltip();})
-    </script>
-
 </body>
 </html>
diff --git a/core/templates/course.html b/core/templates/course.html
@@ -36,7 +36,9 @@ <h1 class="course-name bottom top">{{course.name}}</h1>
         <section class="course-video top row">
           {% with yid=course.intro_video.youtube_id %}
           <div class="col-lg-12 col-sm-12">
-            <iframe class="2 col-lg-12 col-sm-12 left right" id="ytplayer" type="text/html" height="489" src="https://www.youtube.com/embed/{{yid}}?rel=0&showinfo=0&autohide=1&theme=light&wmode=opaque" frameborder="0" allowfullscreen></iframe>
+            <iframe class="2 col-lg-12 col-sm-12 left right" id="youtube-player" type="text/html" frameborder="0"
+                    src="https://www.youtube.com/embed/{{yid}}?rel=0&showinfo=0&autohide=1&theme=light&wmode=opaque" allowfullscreen>
+            </iframe>
           </div>
           {% endwith %}
         </section>

diff --git a/lesson/static/templates/lesson_video.html b/lesson/static/templates/lesson_video.html
@@ -1,7 +1,7 @@
 <div class="col-lg-8 col-md-11 col-sm-11">
 <!-- PLAYER AND SUBTITLE-->
     <div class="row">
-        <div class="col-lg-12 col-md-12 col-sm-12">
+        <div id="player-outter" class="col-lg-12 col-md-12 col-sm-12">
             <div id="youtube-player" youtube-player></div>
         </div>
     </div>