为什么在移动设备上使用 FancyBox 中的 Youtube 视频不显示？

Question

我正在使用 Fancybox 来显示 youtube 视频。在 PC 和 MAC 中一切正常，但在移动设备中却不行。我的代码是：

  <div class="gallery slider">
        <div><a class="various fancybox.iframe slick-slide" title="The Falltape" href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&amp;autoplay=1"><img src="../images/2.jpg"></a></div>
        <div><a class="various fancybox.iframe slick-slide" title="The Barn" href="http://www.youtube.com/v/4tS88S6em8Y?fs=1&amp;autoplay=1"><img src="../images/1.jpg"></a></div>
        <div><a class="various fancybox.iframe slick-slide" title="The Barn" href="http://www.youtube.com/v/4tS88S6em8Y?fs=1&amp;autoplay=1"><img src="../images/2.jpg"></a></div>
        <div><a class="various fancybox.iframe slick-slide" title="The Falltape" href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&amp;autoplay=1"><img src="../images/2.jpg"></a></div>
        <div><a class="various fancybox.iframe slick-slide" title="The Barn" href="http://www.youtube.com/v/4tS88S6em8Y?fs=1&amp;autoplay=1"><img src="../images/1.jpg"></a></div>
        <div><a class="various fancybox.iframe slick-slide" title="The Barn" href="http://www.youtube.com/v/4tS88S6em8Y?fs=1&amp;autoplay=1"><img src="../images/2.jpg"></a></div>
    </div>

<script type="text/javascript">
        $(document).ready(function() {
            $(".various").fancybox({
                maxWidth    : 800,
                maxHeight   : 600,
                fitToView   : false,
                width       : '70%',
                height      : '70%',
                autoSize    : false,
                closeClick  : false,
                openEffect  : 'elastic',
                closeEffect: 'none',
                type: "iframe",
                iframe: {
                    preload: false
                }
            });
        });

这是怎么回事？

当我使用开发者工具时，出现以下错误：

资源被解释为文档但以 MIME 类型传输 application/x-shockwave-flash.trong text

Answer 1

终于明白了

这里的问题是 URL 用于访问 Youtube 视频。我更改了 URLs，现在可以使用了：

<div class="gallery slider">
        <div><a class="fancybox fancybox.iframe slick-slide" title="The Falltape" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/2.jpg"></a></div>
        <div><a class="fancybox fancybox.iframe slick-slide" title="The Barn" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/1.jpg"></a></div>
        <div><a class="fancybox fancybox.iframe slick-slide" title="The Barn" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/2.jpg"></a></div>
        <div><a class="fancybox fancybox.iframe slick-slide" title="The Falltape" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/2.jpg"></a></div>
        <div><a class="fancybox fancybox.iframe slick-slide" title="The Barn" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/1.jpg"></a></div>
        <div><a class="fancybox fancybox.iframe slick-slide" title="The Barn" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/2.jpg"></a></div>
    </div>

通过阅读 YouTube API 文档，明确规定要使用的 URL 必须采用以下格式：

https://www.youtube.com/embed/VIDEO_ID

我没有使用那种格式。

为什么在移动设备上使用 FancyBox 中的 Youtube 视频不显示？

Why Youtube videos in FancyBox are not showing when used on mobile devices?

fancybox