我有一个响应式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
当我在.video-container中使用.blog-column类时，它不再起作用，但尺寸为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>