YouTube 動画の埋め込みをレスポンシブ対応する方法を紹介します。 埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。 また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。 動画の埋め込みをレスポンシブ対応する方法 aspect-ratio を使った方法 padding-top ハックを使った方法 動画の埋め込みをレスポンシブ対応する方法 まずは YouTube からコピーした「動画の埋め込みのコード(iframe)」をブロック要素(<div class="youtube">〜</div>)で囲みます。 <div class="youtube"> <iframe width="560" heig
![YouTube 動画埋め込みのレスポンシブ対応方法 - by Takumi Hirashima](https://cdn-ak-scissors.b.st-hatena.com/image/square/563b382376a914aa1c8852b2dd848991bf4ff955/height=288;version=1;width=512/https%3A%2F%2Fhirashimatakumi.com%2Fwp%2Fwp-content%2Fuploads%2F2019%2F12%2F200526_1.jpg)