jquery - 与 fancybox 一起使用时如何在 jwplayer 上获取全屏视频

Question

与 fancybox 一起使用时，如何在 jwplayer 上获取全屏视频？现在我有 fancybox 打开一个包含 jwplayer 嵌入的 div，它工作正常，视频在按下播放等时播放，所以这一切都很好。唯一的问题是，当我在视频上按全屏时，它会在浏览器和 facybox 弹出窗口后面播放全屏视频，因此我无法正确看到它。我需要全屏聚焦。我注意到 fancybox 使用了很多 z-index 值，这是导致它的原因吗？

任何帮助将不胜感激，谢谢。

Answer 1

这完全取决于您嵌入视频的方式。我个人不喜欢使用内嵌嵌入视频，因为无论您现在还是以后看到它们，它们都会在后台加载，这会影响性能和页面加载。

如果您计划在 fancybox 中显示它们，推荐的方法是按需调用它们，因此使用以下 html:

<a class="video" href="pathToVideo/video.flv">open my video in fancybox</a>

使用这个脚本:

<script type="text/javascript">
 $(document).ready(function(){
  $("a.video").click(function() {
   $.fancybox({
    'padding' : 0, // optional
    'title' : this.title,
    'content': '<embed src="jwplayer.swf?file='+this.href+'&amp;autostart=true&amp;fs=1" type="application/x-shockwave-flash" width="352" height="240" wmode="opaque" allowfullscreen="true" allowscriptaccess="always"></embed>'               
   }); // fancybox
   return false;
  }); // click
 }); // ready
</script>

参见example here