自适应YouTube视频嵌入

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中：

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％。

翻译自: https://flaviocopes.com/responsive-youtube-videos/