html - 嵌入式 Youtube 视频未填满屏幕

Question

我正在尝试为我 friend 的婚礼建立一个网站。我使用的是 Bootstrap 5，嵌入的视频没有填满屏幕大小。这是一个 live test page

HTML:

<div class="embed-responsive embed-responsive-16by9 mx-auto"><iframe width="560" height="315" src="https://www.youtube.com/embed/S8smZWM_dl8" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

您还需要代码吗？我想让视频的全宽和高度由屏幕尺寸自动决定。谢谢

Answer 1

我已将宽度设置为 100%，并为 iframe 指定了最小高度。我希望它能达到您寻求的目的。在下面找到屏幕截图。此外，如果您提供了完整的代码，那么也许我可以调整视频大小以匹配设计。如果这有帮助，请投票给我。谢谢

<div class="embed-responsive embed-responsive-16by9">
    <iframe style="width: 100%; min-height: 315px;" src="https://www.youtube.com/embed/S8smZWM_dl8" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>