Question

我尝试使用colorbox（http://www.jacklmoore.com/colorbox/）jquery插件在灯箱中启动YouTube视频。

这在colorbox网站的示例页面上工作正常，但是当我在我的网站上试用时，我不起作用。

控制台中没有错误，灯箱打开时没有任何错误。

此处示例： http://codeplay.azurewebsites.net/colorbox/index.html

以下是我启动colorbox的方法：

$.colorbox({
href: 'http://www.youtube.com/embed/v0EsVMAyZdI',
iframe: true,
maxWidth: "80%",
maxHeight: "80%"
});

任何想法出了什么问题？

Answer 1

在您的链接上执行此操作：

<a class="youtube cboxElement" href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a>

和JS：

$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});

另请参阅此页面的来源，其中有许多示例： http://www.jacklmoore.com/colorbox/example2/

Answer 2

抱歉，您必须为iframe元素指定width和height属性。 Colorbox无法衡量iframe的大小应该与其他类型的内容一样，因为它并不能确定iframe内部的内容。

Answer 3

你解决了这个问题吗？

如果不是，那就是一块：

<a class='youtube' href='http://www.youtube.com/watch?v=VOJyrQa_WR4'>Business Cats</a>
<script>
$('.youtube').colorbox({iframe: true, width: 640, height: 390, href:function(){
    var videoId = new RegExp('[\\?&]v=([^&#]*)').exec(this.href);
    if (videoId && videoId[1]) {
        return 'http://youtube.com/embed/'+videoId[1]+'?rel=0&wmode=transparent';
    }
}});
</script>

取自： http://www.jacklmoore.com/colorbox/faq/#faq-youtube

如何在彩盒中启动管视频？

3 个答案: