我的网页上嵌入了一些来自 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>
从
width
元素中删除内联样式 (height
& iframe
)
然后将此 css 代码添加到您的样式文件中:
.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>