Fancybox 中的 JW Player 尺码问题

Question

我正在使用 fancyBox to display videos that are hosted through JW Player。

如果我使用 JW Player 提供的 "Single Line Embed Code" 或如果我使用 iframe 选项似乎没有什么不同——视频仍然显示为最大 100 像素宽。我似乎无法弄清楚是什么在控制它，也看不出必须为此目的专门定制 fancybox 的理由。

还有其他人运行处理过这个问题吗？

我的 HTML 看起来像这样：

<a href="#media1" rel="gallery" class="fancybox">01</a>

<div id="media1" class="fancybox-content">
  <script src="//content.jwplatform.com/players/xxxxxxxx-xxxxxxxx.js"></script>
</div>

我的 CSS 看起来像这样：

.fancybox-content {
  display: none; // This hides any content that should appear within fancyBox
  width: 100%;
  max-width: 960px;
}

我设置了一个 Codepen 来说明我遇到的问题。

Answer 1

诀窍是向 fancybox 添加 'autoSize:false' 选项。在播放器渲染之前，fancybox 似乎将框自动调整到最小。笔已更新并且现在可以正常工作。

$(".fancybox").fancybox( {
    autoSize: false
});

Fancybox 中的 JW Player 尺码问题

JW Player Sizing Issue in Fancybox

jquery

html

css

fancybox

jwplayer