自适应YouTube视频嵌入-CSDN博客

本文介绍了如何解决嵌入YouTube视频时遇到的问题，强调了需要保持视频的宽高比以确保显示正常。通过将视频包裹在容器div中并应用特定CSS，可以实现响应式布局。关键CSS代码涉及使用百分比的padding-bottom来根据视频的16:9或4:3等不同比例调整填充。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

The problem with embedding YouTube videos is that they are an iframe and iframes need to be given an exact height and width otherwise they will look funky.

嵌入YouTube视频的问题在于它们是iframe并且iframe必须具有确切的高度和宽度，否则它们看起来会很时髦。

And we need to keep the proportions, based on the video aspect ratio.

而且，我们需要根据视频宽高比保持比例。

To have a YouTube video be displayed responsive in your page, first wrap it into a container div:

要使YouTube视频在页面中显示为响应式，请先将其包装到容器div中：

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/klZNNUz4wPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Then add this CSS to your site:

然后将此CSS添加到您的站点：

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

See that magic number, 56.25%? That’s needed as a padding when the aspect ratio of a video is 16:9. (9 is 56.25% of 16).

看到那个魔术数字 ， 56.25% ？当视频的高宽比为16：9时，这是需要填充的。 (9是16的56.25％)。

If your video is 4:3 for example, set it to 75%.

例如，如果您的视频是4：3，请将其设置为75％。