在Fancybox jquery中打开YouTube视频
Can I open youtube video in fancybox.
我可以在fancybox中打开youtube视频吗?
I have a list of youtube videos links , for ex:
我有一个youtube视频链接列表,例如:
<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a>
and fancybox :
和fancybox:
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
I don't want to create for each video new embed object.
我不想为每个视频创建新的嵌入对象。
Is there some plug in, or a other way to do that ?
是否有插件或其他方法可以做到这一点?
6 个解决方案
#1
35
THIS IS BROKEN, SEE EDIT
<script type="text/javascript">
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {'wmode':'transparent','allowfullscreen':'true'}
});
</script>
This way if the user javascript is enabled it opens a fancybox with the youtube embed video, if javascript is disabled it opens the video's youtube page. If you want you can add
这样,如果用户javascript已启用,则会打开包含youtube嵌入视频的fancybox,如果禁用了javascript,则会打开视频的youtube页面。如果你想要,你可以添加
target="_blank"
to each of your links, it won't validate on most doctypes, but it will open the link in a new window if fancybox doesn't pick it up.
对于您的每个链接,它不会在大多数doctypes上验证,但如果fancybox没有提取它,它将在新窗口中打开链接。
EDIT
this
, above, isn't referenced correctly, so the code won't find href
under this
. You have to call it like this:
这个,上面,没有正确引用,所以代码将不会在此下找到href。你必须像这样称呼它:
$("a.more").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;
});
as covered at http://fancybox.net/blog #4, replicated above
如http://fancybox.net/blog#4所述,在上面复制
更多相关文章
- jQuery图片热点链接添加编辑插件
- 如何在HTML中为移动页面创建图像下载链接?
- css3+html5——拼接图片中icon的使用、照片轮换(没写完)、视频、音
- 如何在HTML视频标签中播放FLV视频?
- 9.1.4 前端 - HTML body标签 - 标题,段落,分割线,换行,特殊符号,列
- html5 css3 背景视频循环播放代码
- HTML5视频标签使用时注意事项
- 单击链接中的复选框会导致以下链接——我如何避免这种情况?
- (转)让所有浏览器支持HTML5 video视频标签