Fix video size on chrome android

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 35dea0e71b55df209741536458bd4f458de07d21..159eec89ef77fe50c0cec41afd90d73a3dd89474 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -934,17 +934,21 @@ Fluidbook.prototype = {
 
         var view = '<div class="caption"><a href="#" class="back">' + this.l10n.__('back') + '</a></div>';
         view += '<div class="content">';
+
+        var h = this.resize.getPopupWebVideoHeight();
+
         if (service == 'youtube') {
-            view += '<iframe class="webvideo" type="text/html" width="100%" height="407" src="http://www.youtube.com/embed/' + video + '?autoplay=1&modestbranding=1&rel=0&html5=1" frameborder="0"></iframe>';
+            view += '<iframe class="webvideo" type="text/html" width="100%" height="' + h + '" src="http://www.youtube.com/embed/' + video + '?autoplay=1&modestbranding=1&rel=0&html5=1" frameborder="0"></iframe>';
         } else if (service == 'dailymotion') {
-            view += '<iframe class="webvideo" type="text/html" width="100%" height="407" src="http://www.dailymotion.com/embed/video/' + video + '?autoplay=1&logo=0&related=0&html5=1" width="100%" frameborder="0"></iframe>'
+            view += '<iframe class="webvideo" type="text/html" width="100%" height="' + h + '" src="http://www.dailymotion.com/embed/video/' + video + '?autoplay=1&logo=0&related=0&html5=1" width="100%" frameborder="0"></iframe>'
         } else if (service == 'brightcove') {
-            view += '<iframe class="webvideo" type="text/html" width="100%" height="407" src="./video/brightcove.html?pid=' + DATAS.brightcovePlayerId + '&pk=' + encodeURIComponent(DATAS.brightcovePlayerSecret) + '&vid=' + video + '" width="100%" frameborder="0"></iframe>'
+            view += '<iframe class="webvideo" type="text/html" width="100%" height="' + h + '" src="./video/brightcove.html?pid=' + DATAS.brightcovePlayerId + '&pk=' + encodeURIComponent(DATAS.brightcovePlayerSecret) + '&vid=' + video + '" width="100%" frameborder="0"></iframe>'
         }
         view += '</div>';
         $("#view").append('<div class="mview">' + view + '</div>');
         $("#view .mview:last iframe").each(function () {
-            $(this).attr('height', ($(this).width() * 9) / 16);
+            $(this).attr('height', h);
+            $(this).css('height', h);
         });
         this.stats.track(11);
         if (callback != undefined) {

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 210a8ba4e3ee6a4193071dada3b1981bdf5b620b..4c9126ca2d7c9d262a675c660b6264c42b03ce28 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -183,8 +183,19 @@ FluidbookResize.prototype = {
         });
         $("#next,#previous").show();
     },
+
+    getPopupVideoHeight: function () {
+        this.updateWindow();
+        return this.hh - 80;
+    },
+
+    getPopupWebVideoHeight: function () {
+        return $(window).height() - 44;
+    },
+
     resizePopupVideos: function () {
-        var maxh = this.hh - 80;
+        var $this = this;
+        var maxh = this.getPopupVideoHeight();
         var maxw = $(window).width() - 40;
         var w;
         var h;
@@ -215,8 +226,7 @@ FluidbookResize.prototype = {
 
 
         $(".mview .webvideo").each(function () {
-            var h = $(window).height() - 44;
-            $(this).css('height', h);
+            $(this).css('height', $this.getPopupWebVideoHeight());
         });
 
         $(".mview .multimediaScale").each(function () {

diff --git a/video/brightcove.html b/video/brightcove.html
index 09494b77dfb1e0ab050085c51e9d2a42423275ef..7565ca12d848903ccb5f81f89c88dfbbc3be673c 100644 (file)
--- a/video/brightcove.html
+++ b/video/brightcove.html
@@ -5,6 +5,7 @@
        <style type="text/css">\r
                html, body, #myExperience {\r
                        height: 100%;\r
+                       width: 100%;\r
                }\r
 \r
                * {\r
@@ -25,6 +26,32 @@ By use of this code snippet, I agree to the Brightcove Publisher T and C
 found at https://accounts.brightcove.com/en/terms-and-conditions/.\r
 -->\r
 <script type="text/javascript">\r
+       var player, APIModules, videoPlayer, experienceModule;\r
+\r
+       window.addEventListener("resize", experienceResize);\r
+\r
+       function onTemplateReady(evt) {\r
+\r
+               videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);\r
+               experienceModule = player.getModule(APIModules.EXPERIENCE);\r
+\r
+               experienceResize();\r
+       }\r
+\r
+       function experienceResize() {\r
+               var width = window.innerWidth\r
+                               || document.documentElement.clientWidth\r
+                               || document.body.clientWidth;\r
+\r
+               var height = window.innerHeight\r
+                               || document.documentElement.clientHeight\r
+                               || document.body.clientHeight;\r
+\r
+               if (experienceModule !== undefined) {\r
+                       experienceModule.setSize(width, height);\r
+               }\r
+       }\r
+\r
        function parseGet() {\r
                var couples = window.location.search.substr(1).split('&');\r
                var res = new Array();\r
@@ -35,17 +62,19 @@ found at https://accounts.brightcove.com/en/terms-and-conditions/.
                }\r
                return res;\r
        }\r
-       var get = parseGet();\r
+\r
+       var _get = parseGet();\r
        document.write('<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"><' + '/script>');\r
        document.write('<object id="myExperience" class="BrightcoveExperience">')\r
        document.write('<param name="bgcolor" value="#000000"/>')\r
        document.write('<param name="width" value="100%"/>')\r
        document.write('<param name="height" value="100%"/>')\r
-       document.write('<param name="playerID" value="' + get.pid + '" />')\r
-       document.write('<param name="playerKey" value="' + get.pk + '" />')\r
+       document.write('<param name="playerID" value="' + _get.pid + '" />')\r
+       document.write('<param name="playerKey" value="' + _get.pk + '" />')\r
        document.write('<param name="isVid" value="true"/>')\r
        document.write('<param name="isUI" value="true"/>')\r
        document.write('<param name="dynamicStreaming" value="true"/>');\r
-       document.write('<param name="@videoPlayer" value="' + get.vid + '" />');\r
+       document.write('<param name="templateReadyHandler" value="onTemplateReady" />');\r
+       document.write('<param name="@videoPlayer" value="' + _get.vid + '" />');\r
        document.write('</object>');\r
 </script>
\ No newline at end of file