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

标签 html twitter-bootstrap youtube bootstrap-5

我正在尝试为我 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>

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

最佳答案

我已将宽度设置为 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>

enter image description here

关于html - 嵌入式 Youtube 视频未填满屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69847055/

相关文章:

html - 如何处理 optgroup 在不同浏览器中的不同行为?

c# - 如何获取此字符串中标签的 href 属性?

youtube - 帮助YouTube嵌入!

javascript - 如何在不访问互联网和本地文件系统的情况下使用 bootstrap javascript 库?

youtube - 获取 Youtube channel 的视频列表作为 RSS 源

javascript - 如何减慢 JavaScript 代码的执行速度?

html - 根据屏幕宽度 HTML 对齐列中的元素

html - 如何垂直对齐按钮

html - 使用 Bootstrap 并排响应式设置复选框

jquery - Bootstrap Center col-sm div inside row 类