自适应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中：

<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:

然