Bootstrap 模态中的 YouTube 嵌入缩略图模糊

Question

在我的网站上放置 YouTube 嵌入代码时，它可以正常工作，直到我将其放入 Bootstrap 模式，此时加载的缩略图是默认的并且看起来很模糊。

我最初在使用 Bootstrap 3 的 WordPress 网站上注意到了这一点。我不确定问题是否出在网站上的其他代码上，但我使用原始 Bootstrap 3 模板创建了一个虚拟区域，并将嵌入代码直接放在页面上它加载了正确的缩略图分辨率，但是当把它放在一个模式中时，缩略图是非常像素化的——看起来它加载的版本只有 120px 宽。

我看过与此类似的帖子，但无论将代码放在哪里，这些帖子都描述了一个问题。在这种情况下，它只发生在模态中。

我确实尝试过更改模式最初隐藏的方式，所以我尝试了 position:absolute; 而不是 display:none；左：40000px；而是将其隐藏在页面之外，这似乎有所作为，但并不理想。

然而，这让我觉得问题在于，在最初加载页面时，如果 YouTube 检测到嵌入代码是 HTML 中的 display:none 样式，那么它会加载最小的缩略图。

有没有办法在加载模式时刷新 iFrame？这是我使用的基本代码，您可以在其中看到页面上嵌入代码的缩略图与模式中的缩略图之间的区别：

<iframe width="872" height="491" src="https://www.youtube.com/embed/_oujaqNoNUQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<iframe width="872" height="491" src="https://www.youtube.com/embed/_oujaqNoNUQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

Answer 1

Chrome 和 IE 也有同样的问题。是的，这是因为隐藏模式没有宽度，所以提供的缩略图是最小的（100px X 100px）。模式打开后，我们重新加载了 iframe 源。是的，从旧的模糊缩略图快速“闪烁”到新的正确缩略图，但它解决了问题。

$(".modal").on("show.bs.modal", function(e) {
 var $if = $(e.delegateTarget).find('iframe');
 var src = $if.attr("src");
 $if.attr("src", '/empty.html');
 $if.attr("src", src);
});