Fancybox Vimeo在点击时显示一个白色屏幕

Question

我在主页上添加了一个vimeo弹出窗口。当你点击播放时，盒子会显示出来，但它是一个全白色的盒子。那里或dreamweaver中没有弹出错误消息。我在谷歌chrome中看到了这个，它是一个白色的盒子。在Safari中，它会继续加载，视频永远不会显示。当我将链接更改为youtube视频时。。。它工作得很好。这是代码。

`<a class="fancybox fancybox.iframe" href="http://vimeo.com/72441143"><img src="../MSK-Site/Graphics/play.png" style="position:fixed; left:550px; bottom:450px;" /></a>`

这是jquery

<script type="text/javascript">
$(document).ready(function(){
    $(".fancybox").fancybox({
        width   :   '70%',
        height  :   '70%'
        });
    });

---

好的，这是我对你的回答的回应-JFK

<script type="text/javascript"    
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>   
<link rel="stylesheet" type="text/css" media="screen" href="../MSK-Site/js/fancy-   
box/source/jquery.fancybox.css">
<script type="text/javascript" src="../MSK-Site/js/fancy-
box/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="../MSK-Site/js/fancy-
box/source/helpers/jquery.fancybox-media.js"></script>

和

<a class="fancybox fancybox.iframe" href="http://player.vimeo.com/video/72441143?    
autoplay=1"><img src="../MSK-Site/Graphics/play.png" style="position:fixed; left:550px;   
bottom:450px;" /></a>
<script type="text/javascript">
$(document).ready(function () {
    $(".fancybox").fancybox({
        width: '70%',
        height: '70%',
        helpers: {
            media: {}
        }
    });
});
</script>

Answer 1

您不能在iframe中包含Vimeo，正如您在这个JSFIDDLE中看到的那样。最有可能的是使用x帧选项来避免这种情况。

如果你想使用fancybox在iframe内观看Vimeo的视频，那么你有两个选择：

---

1） 。更改html的格式，以便在锚的href中使用Vimeo的player，如：

<a class="fancybox fancybox.iframe" href="http://player.vimeo.com/video/72441143?autoplay=1">vimeo</a>

请参阅JSFIDDLE

---

2） 。使用fancybox的媒体助手（推荐）

保留你的html锚点作为

<a class="fancybox fancybox.iframe" href="http://vimeo.com/72441143">vimeo</a>

然后加载fancybox的Media Helper js文件

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

并更改脚本以加载帮助程序，如：

$(document).ready(function () {
    $(".fancybox").fancybox({
        width: '70%',
        height: '70%',
        helpers: {
            media: {}
        }
    });
});

请参阅JSFIDDLE