jquery - YouTube在Bootstrap Modal中嵌入缩略图模糊

Question

当将YouTube嵌入代码放置在我的网站上时，直到我将其放入Bootstrap Modal(加载的自举程序)中时，它才能正常工作。

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

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

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

但是，这使我认为问题是，当最初加载页面时，如果YouTube检测到嵌入代码是具有display:none样式的HTML，则它将加载最小的缩略图。

有没有办法在加载模态时刷新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);
});