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
                }
            });
        });

可以发生什么事？

当我使用Developer Tools时，显示以下错误：

资源被解释为文档，但使用MIME类型application / x-shockwave-flash.trong text

进行传输

Answer 1

我终于明白了。

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

<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文档，我们明确规定要使用的网址必须采用以下格式：

<强> https://www.youtube.com/embed/VIDEO_ID

我没有使用那种格式。

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

1 个答案: