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所述,在上面复制

更多相关文章

  1. jQuery图片热点链接添加编辑插件
  2. 如何在HTML中为移动页面创建图像下载链接?
  3. css3+html5——拼接图片中icon的使用、照片轮换(没写完)、视频、音
  4. 如何在HTML视频标签中播放FLV视频?
  5. 9.1.4 前端 - HTML body标签 - 标题,段落,分割线,换行,特殊符号,列
  6. html5 css3 背景视频循环播放代码
  7. HTML5视频标签使用时注意事项
  8. 单击链接中的复选框会导致以下链接——我如何避免这种情况?
  9. (转)让所有浏览器支持HTML5 video视频标签

随机推荐

  1. 'where'in with duplicates或'select dis
  2. 使用触发器插入另一个表
  3. ASP和SQLServer时间处理方法
  4. 检查mysql中的行顺序
  5. 请大家帮我解决一下MySQL已经都设置成UTF
  6. 50分求关于执行SQL脚本文件的问题,在线等
  7. mysql数据库基本操作指南
  8. 直接的文件备份和用sqlserver的备份有什
  9. 工作日记(连接SQL Sever 2005服务器数据
  10. 解决异常报错org.mybatis.spring.MyBatis