Question

我正在尝试使用fancyBox 2嵌入Vimeo视频。我可以让灯箱弹出，但我得到的是一个永久持续的旋转加载图标。

我在StackExchange上对类似的Vimeo问题进行了大量搜索，但是实现其他人提出的建议还没有解决问题。

我现在甚至创建了一个新的测试站点（在本地目录中包含链接文件的纯HTML文档），然后使用fancyBox文档部分中列出的代码使用Media Helpers（Extended Functionality）line-for -line，但这也不起作用。相同的加载微调器，永远卡住。

有没有人有任何想法为什么这不起作用？在Safari 7和Chrome中进行测试。在Safari中，我得到卡住的加载微调器。在Chrome中，我在灯箱中看到一个错误页面，上面写着“无法找到文件或目录。”

这是我的代码：

<!DOCTYPE HTML>

<head>

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Add fancyBox -->

<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Add fancyBox media helpers -->

<script type="text/javascript" src="js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('.fancybox-media').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            helpers : {
                media : {}
            }
        });
    });
</script>

</head>

<body>

    <a class="fancybox-media" href="https://vimeo.com/78112273">Video</a>

</body>

我得到的就是卡住的微调器和错误页面。

非常感谢任何帮助和建议！谢谢！

Answer 1

确保您的页面具有有效的DOCTYPE，最重要的是，请注意，在显示弹出窗口时，该案例似乎会影响视频是否实际加载。（你需要在doctype声明中使用小写的'html'）

即。使用：

<!DOCTYPE html>
<html>
<head>

为我修好了......这可能就是为什么你的例子在jsfiddle中工作的原因。

fancyBox 2 Vimeo嵌入不起作用

1 个答案: