Javascript Fancybox-嵌入式YouTube（使用YouTube API）不'；无法在iOS上加载

我使用Fancybox来显示上传到YouTube的视频。我希望在视频结束时执行操作（在本例中，从视频移动到组中的下一个元素-图像），因此我也使用YouTube API

该页面在桌面浏览器上运行得非常好（我认为Android也可以，但我还没有进行广泛的测试），但在我的iPhone上它无法加载视频。覆盖即将出现，但它似乎试图自动播放视频，然后变为黑色

我目前正在使用jQuery1.8.3（我在1.10中尝试过，但没有成功，所以我尝试了降级）和Fancybox 2.1.5

以下是相关的HTML：

<div class="content" id="main">
    <div id="logo">
        <a class="fancybox fancybox.iframe" id="logo-link" data-fancybox-group="group01"href="http://www.youtube.com/embed/Bc0qNwaSxlM"></a>
        <a class="fancybox" id="v-link" data-fancybox-group="group01" data-fancybox-type="image" href="img/superhard_v.png" title="<a href='#' id='return-link'>or return to ihardyou</a>"></a>
    </div>
</div>

">

JavaScript:

window.onYouTubePlayerAPIReady = function() {
    // Initialise the fancyBox after the DOM is loaded
    $(document).ready(function() {
        $(".fancybox")
            .attr('rel', 'gallery')
            .fancybox({
                helpers: {
                    media: {},
                    overlay : {
                        css : {
                            'background' : 'rgba(0, 0, 0, 0.95)'
                        }
                    }
                },
                youtube : {
                    vq: 'hd1080'
                },
                padding: 0,
                margin: 30,
                autoSize: false,
                arrows: false,
                'closeBtn' : false,
                beforeShow  : function() {
                    // Find the iframe ID
                    var id = $.fancybox.inner.find('iframe').attr('id');

                    // Create video player object and add event listeners
                    var player = new YT.Player(id, {
                        events: {
                            'onReady': onPlayerReady,
                            'onStateChange': onPlayerStateChange
                        }
                    });

                    if (this.index === 1) {
                        $('.fancybox-outer').css("padding-bottom","100px");
                    }  
                },
                afterShow: function() {
                    if (this.index === 1) {
                        $("img.fancybox-image").click(function(event) {
                            event.preventDefault();
                            newLocation = "vanity/";
                            $('body').fadeOut(1000, newPage);
                        });

                        $('#return-link').click(function(event) {
                            event.preventDefault();
                            $.fancybox.close();
                        });  
                    }               
                },
                tpl: {
                    wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin" style="background-color:transparent;"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>'
                },
                iframe: {
                    preload: false
                }
            });

    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

// Fires when the player's state changes.
function onPlayerStateChange(event) {
    // Go to the image after the current one is finished playing
    if (event.data === 0) {
        setTimeout(function(){$.fancybox.next()},1250);
    }
}

window.onYouTubePlayerAPIReady=function（）{
//加载DOM后初始化fancyBox
$（文档）.ready（函数（）{
$（“.fancybox”）
.attr（'rel'，'gallery'）
.fancybox({
助手：{
媒体：{}，
覆盖：{
css:{
'背景'：'rgba（0,0,0,0.95）'
}
}
},
youtube：{
vq:‘hd1080’
},
填充：0，
差额：30，
自动调整大小：false，
箭头：错，
“closeBtn”：false，
beforeShow:function（）{
//查找iframe ID
var id=$.fancybox.inner.find（'iframe'）.attr（'id'）；
//创建视频播放器对象并添加事件侦听器
var玩家=新的YT玩家（id{
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
如果（this.index==1）{
$（'.fancybox outer'）.css（“填充底部”，“100px”）；
}  
},
afterShow:function（）{
如果（this.index==1）{
$（“img.fancybox图像”）。单击（函数（事件）{
event.preventDefault（）；
newLocation=“虚荣/”；
$（'body'）.fadeOut（1000，newPage）；
});
$（“#返回链接”）。单击（函数（事件）{
event.preventDefault（）；
$.fancybox.close（）；
});  
}               
},
第三方物流：{
换行：“”
},
iframe：{
预加载：false
}
});
});
}
函数onPlayerReady（事件）{
event.target.playVideo（）；
}
//当玩家的状态改变时激发。
函数onPlayerStateChange（事件）{
//在当前图像播放完毕后转到该图像
如果（event.data==0）{
setTimeout（函数（）{$.fancybox.next（）}，1250）；
}
}

我为

iframe

添加了

autoSize

和

preload:false

，因为我从其他人的问题中找到了解决方案，但它们都不起作用。我特别希望后者能起作用，因为它不起作用，这让我相信这可能是API的问题。我还查看了on t他在Fancybox主页上使用了API，但在我的iPhone上也不起作用，进一步证实了我的怀疑

---

如果有人有解决方法或者知道如何解决此问题，我们将不胜感激。谢谢！

为什么不重新检查fancybox网站中使用的各种示例：

您可以试试这个： *Html*

我们将检查他们的youtube iframe官方小提琴：

Html:

---

你可以查看剩余内容。

最好查看官方的youtube iframe，在iPad或iPhone上自己摆弄自己，这样你就可以看到它不起作用了。

<li>
        <a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
    </li>

$(document).ready(function() {
    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?enablejsapi=1&wmode=opaque">Video #1</a>

<br />

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/cYplvwBvGA4?enablejsapi=1&wmode=opaque">Video #2</a>