YouTube (iframe) 上的 Fancybox 2 标题“内部”？

Question

在将 Fancybox 2 用于 YouTube/iFrame 内容时，是否可以将标题放在“内部”？ 每当我尝试插入时

title: {
    type: 'inside'
}

然后视频会在新窗口中全屏播放。 这是我目前正在使用的：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="lib/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lib/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
      $(".vids").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '60%',
            height      : '60%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
      });
  });
</script>

作为奖励，如果可能的话，我希望标题文本包含一个打开 _blank 的链接。

另外，也许相关的是，要让视频在所有浏览器中播放，我必须更改 YouTube 链接，而不是执行以下操作：

<a class="vids fancybox.iframe" href="http://www.youtube.com/watch?v=whatever">

我得改一下，插入“embed”二字，如：

<a class="vids fancybox.iframe" href="http://www.youtube.com/embed/whatever">

这个方法合适吗？

提前致谢。

Answer 1

很多问题是吗？

首先，要在fancybox中获取title，请使用helperslike选项

helpers: {  title : { type : 'inside' } }

第二，设置带有链接的title...我建议您在锚点中设置data-* 属性，这样链接就不会正常显示浏览器的工具提示...类似

<a class="vids" href="http://www.youtube.com/watch?v=whatever" title="normal title" data-caption="<a href='{new link}' >See more</a>">open video</a>

注意我没有添加target="_blank"，因为点击链接会自动导航到下一页（并关闭fancybox）

然后使用回调beforeShow构造title

beforeShow: function(){
 this.title = this.title + " " + $(this.element).data("caption");
}

第三，显示 youtube 视频的正确方法是使用普通链接（如我上面的第二个示例），仅此而已。然后在您的文档中包含 fancybox-media js 文件，例如

<script type="text/javascript" src="lib/helpers/jquery.fancybox-media.js"></script>

（检查你自己的路径）

...并使用helpers 选项设置媒体喜欢

helpers : {media : {} }

所以，总结，你的 html 应该是这样的

<a class="vids" href="http://www.youtube.com/watch?v=whatever" title="normal title" data-caption="<a href='{new link}' >See more</a>">open video</a>

还有你的fancybox自定义脚本，比如

<script type="text/javascript">
$(document).ready(function() {
 $(".vids").fancybox({
  maxWidth    : 800,
  maxHeight   : 600,
  fitToView   : false,
  width       : '60%',
  height      : '60%',
  autoSize    : false,
  closeClick  : false,
  openEffect  : 'none',
  closeEffect : 'none',
  helpers     : {  
        title : { type : 'inside' },
        media : {}
  },
  beforeShow: function(){
   this.title = this.title + " " + $(this.element).data("caption");
  }
 });
});
</script>