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

Question

我正在使用 Fancybox 显示上传到 YouTube 的视频。我想在视频结束时执行操作（在这种情况下，从视频移动到组中的下一个元素 - 图像），所以我也在使用 YouTube API。

该页面在桌面浏览器上运行良好（我认为是 Android，但我还没有进行广泛的测试），但在我的 iPhone 上却无法加载视频。叠加层即将出现，但它似乎试图自动播放视频，然后变黑。

我目前正在使用 jQuery 1.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);
    }
}

我为iframe 输入了autoSize 和preload: false，因为我从其他人的问题中遇到了解决方案，但它们没有用。我特别希望后者能工作，因为this question and the example JSFiddle，但它没有工作，这让我相信这可能是 API 的问题？我还查看了使用 API 的 Fancybox 主页上的example，它在我的 iPhone 上也无法使用，进一步证实了我的怀疑。

如果有人有解决方法或任何解决此问题的想法，将不胜感激。谢谢！

Answer 1

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

你可以试试这个： *HTML*

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

Javascript：

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

我们查看他们官方的 youtube iframe 小提琴：This is their fiddle

HTML：

<!-- 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>

你可以看看剩下的