我的网页上嵌入了一些来自 YouTube 的视频。问题是我正在使用下面附加的代码来使其响应（通过引导程序）。它在移动设备和平板电脑上表现良好，但在台式机和笔记本电脑上则显得非常庞大。当我无法解决问题时，我没有使用 YouTube 嵌入，而是改用 HTML5 视频标签。其中，响应问题通过宽度：100％和高度自动解决，但视频没有加载并保持缓冲。因此，我再次切换到 YouTube 嵌入，这样至少可以加载视频，但它并没有真正响应（不是在笔记本电脑、台式机上）。还附上嵌入视频的网页链接。
代码-
<div class="container">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/kq7CdSf7ocA?rel=0" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>从
widthheightiframe.container {
display: flex;
justify-content: center;
}
iframe {
aspect-ratio: 16 / 9;
width: 100% !important;
}
您可以尝试在 iframe 上设置
max-width-- 视频未在片段中加载... Fiddle
.container {
display: flex;
justify-content: center;
}
iframe {
max-width: 900px;
max-height: 400px;
}<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class="container">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/kq7CdSf7ocA?rel=0" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>@Muh-Osmans 解决方案很有魅力。如果您无法使用 CSS 文件并且需要将嵌入内容放置在 Webflow 中（在我的例子中），则此内联解决方案也可以解决它！
<div style="display: flex; justify-content: center;">
<iframe src="https://www.youtube.com/embed/VuaEV2BX5WY?si=XbTtWm3HF9FsP_2M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16 / 9; width: 100% !important;"></iframe>
</div>