css - 响应式视频容器 -> 无宽度/高度问题

Question

我有一个用于响应式 YouTube 视频嵌入的样式表:

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 30px; 
  height: 0;
  overflow: hidden;
}

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

这就像一个魅力。现在，我将其包装到具有以下类的 div 中:

.blog-wrapper > .blog-row > .blog-column

当我在 .blog-column 中使用 .video-container 类时，它不再起作用但尺寸为 0 x 30。当我将 .video-container 放入 .blog-row 或 .blog-wrapper 时，它再次工作，但这显然不适合与布局。

如何在不更改的情况下使 .video-container 在 .blog-column 中工作:

.blog-wrapper .blog-row .blog-column

因为那里的更改也会影响页面的其余部分。

更多 CSS:

.blog-column {
  max-width: 590px;
  display: inline-block;
  padding-right: 10px;
  vertical-align: top;
  margin: 15px 0;
}

我没有找到 .blog-wrapper 和 .blog-row 的任何 css，它们只包含类中元素的 css，所以我没有在这里包含它们。

一些要重现的 HTML:

<div class="blog-row">
<div class="blog-column">
<p class="title">Lorem ipsum dolor</p>
<p class="description" style="text-align: justify;">Lorem ipsum dolor sit 
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
</p>
<p class="link"><a href="some dead link">this is a dead link</a></p>
</div>
<div class="blog-column">
<div class="video-container"><iframe frameborder="0" height="315" 
src="https://www.youtube.com/embed/z8Zj7aVrt4M?ecver=1" width="560"> 
</iframe></div>
</div>
</div>

https://jsfiddle.net/cLmoa58o/

Answer 1

只需将 width: 100% 设置为您的 .blog-column :)更新 fiddle :https://jsfiddle.net/y2q9L125/