猫头鹰旋转木马YouTube视频无法在iOS（iPad和iPhone）上播放

Question

我使用猫头鹰旋转木马并且喜欢它，它效果很好但是当我点击红色播放按钮时，我似乎无法播放嵌入的Youtube视频。 Vimeo视频工作正常。

示例网址

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&amp;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&amp;text=FooBar3" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar5" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar6" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar7" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar8" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar9" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar10" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar11" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar12" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar13" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar14" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar15" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar16" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar17" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar18" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar19" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar20" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar21" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;text=FooBar22" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/750x422&amp;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&amp;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&amp;text=FooBar3" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar5" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar6" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar7" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar8" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar9" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar10" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar11" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar12" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar13" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar14" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar15" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar16" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar17" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar18" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar19" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar20" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar21" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;text=FooBar22" alt="" class="img-responsive"></a></div>
        <div class="item"><a><img src="http://placehold.it/135x90&amp;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 i 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();
});

Answer 1

似乎它与doTranslate（）有关;功能，更具体地说是css translate3d。

在我修改代码后，YouTube视频在iOS上运行：

doTranslate : function (pixels) {
    return {
        "-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)"
    };
}

为：

doTranslate : function (pixels) {
    return {
        "left": pixels + "px"
    };
}

我知道，哈基，但我不是程序员。

谢谢，

Jayde