Question

我在主页上添加了一个vimeo弹出窗口。当您单击播放时，该框显示但是它是一个全白框。没有错误消息弹出那里或在Dreamweaver中。我正在谷歌浏览器中查看这个，它是一个白色的盒子。在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-frame选项来避免这种情况。

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

1）。更改 html 的格式，以使用您锚点的player内的Vimeo href，如：

<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

Fancybox Vimeo在点击时显示白屏

1 个答案: