jquery - Owl Carousel YouTube Video Not Playing on iOS (iPad and iPhone) -
jquery - Owl Carousel YouTube Video Not Playing on iOS (iPad and iPhone) -
i'm using owl carousel , love it, works great can't seem embedded youtube videos play when tap on reddish play button. vimeo videos work fine.
example url:
http://dx1showroom.azurewebsites.net/details-images-v2.html
html:
<div class="thumbnail-frame"> <div id="sliderstatus" class="image-count"> <span class="glyphicon icon-camera"></span> <span class="currentitem"><span class="result"></span></span>/<span class="owlitems"><span class="result"></span></span> </div> <div id="slideshow-main" class="owl-carousel main-frame col-sm-8 col-md-8 col-lg-9"> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar4" alt="" class="img-responsive"></a></div> <div class="item video"><iframe src="http://www.youtube.com/embed/gzl6pisl5p8?rel=0" width="563" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div> <div class="item video"><iframe src="http://player.vimeo.com/video/81036400" width="750" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div> <div class="item"><a><img src="http://placehold.it/422x750&text=foobar3" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar5" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar6" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar7" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar8" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar9" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar10" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar11" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar12" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar13" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar14" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar15" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar16" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar17" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar18" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar19" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar20" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar21" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar22" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/750x422&text=foobar23" alt="" class="img-responsive"></a></div> </div> <div id="slideshow-thumbnails" class="owl-carousel thumbnail-frame"> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar4" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://img.youtube.com/vi/gzl6pisl5p8/1.jpg" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://i.vimeocdn.com/video/457084374_120.jpg" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/90x135&text=foobar3" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar5" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar6" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar7" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar8" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar9" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar10" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar11" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar12" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar13" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar14" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar15" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar16" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar17" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar18" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar19" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar20" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar21" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar22" alt="" class="img-responsive"></a></div> <div class="item"><a><img src="http://placehold.it/135x90&text=foobar23" alt="" class="img-responsive"></a></div> </div> </div> javascript:
$(document).ready(function() { var sync1 = $("#slideshow-main").owlcarousel({ singleitem : true, slidespeed : 500, navigation: true, pagination: false, // itemsscaleup: true, afteraction : sync, responsiverefreshrate : 200, navigation: true, navigationtext: [ '<span class="thumb-prev"><span class="glyphicon icon-prev-arrow"></span></span>', '<span class="thumb-next"><span class="glyphicon icon-next-arrow"></span></span>' ], afterupdate : function() { } }); var sync2 = $("#slideshow-thumbnails").owlcarousel({ items : 12, itemsdesktop : [1199,12], itemsdesktopsmall : [992,8], itemstablet : [768,8], itemsmobile : [520,3], pagination:false, responsiverefreshrate : 100, scrollperpage: true, navigation: true, navigationtext: [ '<span class="thumb-prev"><span class="glyphicon icon-prev-arrow"></span></span>', '<span class="thumb-next"><span class="glyphicon icon-next-arrow"></span></span>' ], afterinit : function(el){ el.find(".owl-item").eq(0).addclass("synced"); }, afterupdate : function() { } }); function sync(el){ var current = this.currentitem; $("#slideshow-thumbnails") .find(".owl-item") .removeclass("synced") .eq(current) .addclass("synced") if($("#slideshow-thumbnails").data("owlcarousel") !== undefined){ center(current) } updateresult(".owlitems", this.owl.owlitems.length); updateresult(".currentitem", this.owl.currentitem +1); } $("#slideshow-thumbnails").on("click", ".owl-item", function(e){ e.preventdefault(); var number = $(this).data("owlitem"); sync1.trigger("owl.goto",number); }); function center(number){ var sync2visible = sync2.data("owlcarousel").owl.visibleitems; var num = number; var found = false; for(var in sync2visible){ if(num === sync2visible[i]){ var found = true; } } if(found===false){ if(num>sync2visible[sync2visible.length-1]) { sync2.trigger("owl.goto", num - sync2visible.length+2) } else { if(num - 1 === -1){ num = 0; } sync2.trigger("owl.goto", num); } } else if(num === sync2visible[sync2visible.length-1]) { sync2.trigger("owl.goto", sync2visible[1]) } else if(num === sync2visible[0]){ sync2.trigger("owl.goto", num-1) } } function updateresult(pos,value){ sliderstatus.find(pos).find(".result").text(value); } $(".owl-carousel").fitvids(); });
seems had dotranslate(); function, more css translate3d.
youtube videos worked on ios me after modified code from:
dotranslate : function (pixels) { homecoming { "-webkit-transform": "translate3d(" + pixels + "px, 0px, 0px)", "-moz-transform": "translate3d(" + pixels + "px, 0px, 0px)", "-o-transform": "translate3d(" + pixels + "px, 0px, 0px)", "-ms-transform": "translate3d(" + pixels + "px, 0px, 0px)", "transform": "translate3d(" + pixels + "px, 0px,0px)" }; } to:
dotranslate : function (pixels) { homecoming { "left": pixels + "px" }; } i know, hacky i'm not programmer.
thanks,
jayde
jquery slider carousel owl-carousel
Comments
Post a Comment