小金井にあるWEB制作会社の備忘録
MEMORANDUMyoutube(iframe)の埋め込み動画をレスポンシブ対応にする

- 公開日:2020-06-13
- 最終更新日:2020-08-05
youtube動画をホームページに掲載する機会も増えてきました。
動画サイズを固定するのであれば、埋め込みタグの幅(width)と高さ(height)を適切に変更すればよいのですが、レスポンシブ対応したい場合は自動的に取得する仕組みが必要。
そこでCSSのみで実装可能な方法をメモ。
HTML
youtubeの埋め込みより取得したコードの「幅(width)と高さ(height)」を指定する部分を削除して設置。
<div class="movie__youtube">
<div class="movie__youtube__frame">
<iframe src="https://www.youtube.com/embed/○○○○" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
CSS
.movie__youtube {
width: 1200px;
margin: 0 auto;
}
.movie__youtube__frame {
position: relative;
width: 100%;
height: 0px;
padding-top: 56.25%; //縦横比が16:9の場合
}
.movie__youtube__frame iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
「.movie__youtube__frame」で設定している「padding-top: 56.25%;」の部分で自動取得が行わる。
※「padding-top」や「padding-bottom」の%指定は親ブロックの幅が基準になる。
