html - Youtube 视频 100% 宽度和自定义高度

Question

我想在我的网站上添加一个宽度为 100%、高度为 400px 的视频；我尝试了以下方法:

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 400px;
}

<div class="container">
  <iframe class="video" src="//www.youtube.com/embed/yCOY82UdFrw" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen">
  </iframe>
</div>

但我的视频结果是这样的: click me pls

内部不是 100%。

有没有人知道如何解决这个问题？我将不胜感激。

谢谢，

凯文

Answer 1

请记住，百分比宽度或高度必须有一个明确声明了某种尺寸的父元素。在这种情况下是:

html, body {width:100%;高度:100%；。

对于高度，您仍然可以灵活地使用 400px:

height: auto;
min-height: 400px;

片段

html,
body {
  height: 100%;
  width: 100%;
}
.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: auto;
  min-height: 400px;
  overflow: hidden;
}

<div class="container">
  <iframe class="video" src="//www.youtube.com/embed/yCOY82UdFrw" frameborder="0" allowfullscreen="allowfullscreen">
  </iframe>
</div>