fix youtube bug for ipad/iphone

In certain mobile browsers (such as Safari on iOS), youtube
autoplay is allowed only if it's initiated by a user interaction.
Therefore player.playVideo() and player.stopVideo() methods
(youtube iframe api) are limited to non-iPad/iPhone devices.

diff --git a/cloudcms/static/cloudcms/js/common.js b/cloudcms/static/cloudcms/js/common.js
index 9919dac..ec562b1 100644 (file)
--- a/cloudcms/static/cloudcms/js/common.js
+++ b/cloudcms/static/cloudcms/js/common.js
@@ -1,3 +1,12 @@
+function isIpadIphone(){\r
+  var flag = false;\r
+    var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone");\r
+    var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad");\r
+    if(isiPhone > -1) { flag = true; }\r
+    if(isiPad > -1) { flag = true; }\r
+    return flag;\r
+}\r
+\r
 function setContainerMinHeight( applicableDiv){\r
        \r
     if ( $(applicableDiv).length > 0 ) {\r

diff --git a/cloudcms/static/cloudcms/js/youtube.js b/cloudcms/static/cloudcms/js/youtube.js
index 2f86864..ce97a24 100644 (file)
--- a/cloudcms/static/cloudcms/js/youtube.js
+++ b/cloudcms/static/cloudcms/js/youtube.js
@@ -1,7 +1,7 @@
 function  YouTube(options) {
   this.options = options;
   this.wrapper = options.wrapper;
-  this.link = this.wrapper.find('a');
+  this.alink = this.wrapper.find('a');
   this.image = this.wrapper.find('img');
   this.videoEl = this.wrapper.find('.player-placeholder');
   this.currwidth = this.wrapper.width();
@@ -31,44 +31,40 @@ function  YouTube(options) {
       this.currheight = parseInt(458* (this.currwidth/816));
       this.wrapper.css('height',this.currheight)
     }
-    
   }, this));
-
   this.initEvents();
-
 }
 
 
 YouTube.prototype.initEvents = function() {
   var self = this;
-  this.link.click(function(e){
+  this.alink.click(function(e){
       e.preventDefault();
       self.image.fadeOut({duration:2500,easing:'easeOutCirc'}); 
-      $(self.player.a).hide().fadeIn({duration:3500,easing:'easeOutCirc'}); 
       self.wrapper.animate({
         height: self.currheight
       },1000, function(){
         self.close.css('visibility','visible');
-        self.link.hide();
-        self.player.setPlaybackQuality('hd720');
-        self.player.playVideo(); 
+        self.alink.hide();
+        if (!(isIpadIphone())) {
+           self.player.playVideo();
+        }
       })
   });
   this.close.click(function(e){
     e.preventDefault();
-    self.player.stopVideo(); 
     self.endEvents();
   })
 }
 
 YouTube.prototype.endEvents = function() {
   var self = this;
+  self.player.pauseVideo();
   self.close.css('visibility','hidden');
   self.image.fadeIn({duration:1500,easing:'easeOutCirc'}); 
-  $(self.player.a).show().fadeIn({duration:1500,easing:'easeOutCirc'}); 
   self.wrapper.animate({
     height:'282'
   },1000, function(){
-    self.link.show();
+    self.alink.show();
   })
-}
+}
\ No newline at end of file