このようなレスポンシブ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/
width: 100%
を設定するだけ あなたの.blog-column
へ :) 更新されたフィドル:https://jsfiddle.net/y2q9L125/