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

米兰·桑切斯（Millan Sanchez）

我正在使用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文本传输

米兰·桑切斯（Millan Sanchez）

我终于明白了。

此处的问题是用于访问Youtube视频的URL。我更改了网址，现在可以使用了：

<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

我没有使用该格式。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。