bugfix> css > 投稿

このようなレスポンシブ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>

https://jsfiddle.net/cLmoa58o/