youtube（iframe）の埋め込み動画をレスポンシブ対応にする

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」の%指定は親ブロックの幅が基準になる。

• 新生テクノス株式会社採用ページ