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);
});

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

1 个答案: