嵌入的Youtube视频没有填满屏幕
嵌入的Youtube视频没有填满屏幕
提问于 2021-11-04 23:35:32
我想为我朋友的婚礼建一个网站。我使用的是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>你需要更多的代码吗？我想得到的视频全宽与高度是由屏幕尺寸自动决定的。谢谢
回答 3
Stack Overflow用户
发布于 2021-11-07 19:27:31
我已经将宽度设置为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>
Stack Overflow用户
发布于 2021-11-08 09:48:15
首先，您应该删除这些类
<div class="container mx-auto mb-4">然后将w-100类添加到嵌入式响应元件中
<div class="embed-responsive embed-responsive-16by9 w-100">之后添加min-height: 100vh样式到你的iframe
iframe{min-height:100vh;}现在你可以全屏嵌入youtube了。
Stack Overflow用户
发布于 2021-11-07 12:32:15
删除width="560"并添加style="width: 100%;"
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69847055
复制相关文章
相似问题
腾讯云开发者
