При размещении кода YouTube для встраивания на моем сайте он работает нормально, пока я не поместил его в модальный вариант Bootstrap, когда загруженный эскиз является значением по умолчанию и выглядит размытым.
Сначала я заметил это на сайте WordPress с использованием Bootstrap 3. Я не был уверен, была ли проблема в другом коде на сайте, но я создал фиктивную область с необработанными шаблонами Bootstrap 3 и поместил код для встраивания прямо на страницу. который загружает правильное разрешение миниатюры, но при помещении его в модальное изображение миниатюрное изображение очень пиксельное - похоже, оно загружает версию шириной всего 120 пикселей.
Я видел подобные посты, но они описывают проблему независимо от того, где они размещают код. В этом случае это происходит только в модале.
Я попытался изменить способ, которым модал изначально скрыт, поэтому вместо отображения: нет, я попробовал position: absolute; Слева направо: 40000px; вместо этого, чтобы скрыть это от страницы, и это, казалось, имело значение, но никоим образом не идеально.
Однако это заставляет меня думать, что проблема заключается в том, что при первоначальной загрузке страницы, если YouTube обнаруживает, что код для встраивания находится в 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">×</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>