From fdfb33d39de52891eac8592c84da501622cd0d7b Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 15 Jul 2015 16:38:42 +0000
Subject: [PATCH] Fix video size on chrome android

---
 js/libs/fluidbook/fluidbook.js        | 12 ++++++---
 js/libs/fluidbook/fluidbook.resize.js | 16 +++++++++---
 video/brightcove.html                 | 37 ++++++++++++++++++++++++---
 3 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 35dea0e7..159eec89 100644
--- 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 210a8ba4..4c9126ca 100644
--- 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 09494b77..7565ca12 100644
--- a/video/brightcove.html
+++ b/video/brightcove.html
@@ -5,6 +5,7 @@
 	<style type="text/css">
 		html, body, #myExperience {
 			height: 100%;
+			width: 100%;
 		}
 
 		* {
@@ -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/.
 -->
 <script type="text/javascript">
+	var player, APIModules, videoPlayer, experienceModule;
+
+	window.addEventListener("resize", experienceResize);
+
+	function onTemplateReady(evt) {
+
+		videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);
+		experienceModule = player.getModule(APIModules.EXPERIENCE);
+
+		experienceResize();
+	}
+
+	function experienceResize() {
+		var width = window.innerWidth
+				|| document.documentElement.clientWidth
+				|| document.body.clientWidth;
+
+		var height = window.innerHeight
+				|| document.documentElement.clientHeight
+				|| document.body.clientHeight;
+
+		if (experienceModule !== undefined) {
+			experienceModule.setSize(width, height);
+		}
+	}
+
 	function parseGet() {
 		var couples = window.location.search.substr(1).split('&');
 		var res = new Array();
@@ -35,17 +62,19 @@ found at https://accounts.brightcove.com/en/terms-and-conditions/.
 		}
 		return res;
 	}
-	var get = parseGet();
+
+	var _get = parseGet();
 	document.write('<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"><' + '/script>');
 	document.write('<object id="myExperience" class="BrightcoveExperience">')
 	document.write('<param name="bgcolor" value="#000000"/>')
 	document.write('<param name="width" value="100%"/>')
 	document.write('<param name="height" value="100%"/>')
-	document.write('<param name="playerID" value="' + get.pid + '" />')
-	document.write('<param name="playerKey" value="' + get.pk + '" />')
+	document.write('<param name="playerID" value="' + _get.pid + '" />')
+	document.write('<param name="playerKey" value="' + _get.pk + '" />')
 	document.write('<param name="isVid" value="true"/>')
 	document.write('<param name="isUI" value="true"/>')
 	document.write('<param name="dynamicStreaming" value="true"/>');
-	document.write('<param name="@videoPlayer" value="' + get.vid + '" />');
+	document.write('<param name="templateReadyHandler" value="onTemplateReady" />');
+	document.write('<param name="@videoPlayer" value="' + _get.vid + '" />');
 	document.write('</object>');
 </script>
\ No newline at end of file
-- 
2.39.5