我的页面上有一个链接图像,单击该图像会加载一个 Fancybox 模式框。它成功完成了此操作,但我希望视频自动播放。如果我将 YouTube URL 设置为 autoplay=1
,隐藏的 DIV 将在页面加载时在后台播放。
// Here is the linked image
<a id="inline" href="#video"><img src="someimage.jpg" alt="Description" /></a>
// Here is the hidden DIV
<div style="display:none">
<div id="video">
<iframe title="YouTube video player" width="640" height="390" src="###YOUTUBE LINK###rel=0&hd=1&autoplay=0" frameborder="0"></iframe>
</div>
</div>
// Here is the script
<script type="text/javascript">
$("a#inline").fancybox({
'hideOnContentClick': true,
});
</script>
我的猜测是我需要执行某种 Bind() 事件和字符串替换,以将 autoplay=0
更改为 autoplay=1
但我尝试了一些变化但没有成功
请问有什么想法吗?
最佳答案
首先更改href
将链接图像添加到 YouTube URL,确保“autoplay=1
”like this link (不是嵌入 URL)。然后摆脱你隐藏的<div>
和 follow tip 4 on the FancyBox "Tips & Tricks" page这是相当简单的:
$("#tip4").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
这样做,即使 JS 被禁用,人们仍然可以观看视频。
关于jquery - 使用 Fancybox 自动播放嵌入的 Youtube 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5159047/