html - CSS - Youtube 嵌入视频的 100% 宽度

Question

HTML:

<div class="video">
  <iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

CSS:

.video {
  width: 100%;
  height: 200px;
  border: 1px solid red;
  overflow: hidden;
  position: relative;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JSFIDDLE: http://jsfiddle.net/pj2utq4v/

问题:如何强制 iframe 为父 div 宽度的 100%。由于父 div 的高度只有 200px，因此 iframe 视频会被裁剪，这对我来说也没有问题。

Answer 1

您可以稍微更改一下 CSS 类:

.video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JSFIDDLE:http://jsfiddle.net/pj2utq4v/1