【2024年版】Webサイトに埋め込んだYouTube動画をレスポンシブ対応させる方法
YouTube動画
レスポンシブ対応
埋め込み
YouTubeサイトで取得したiframe形式の埋め込みコードの場合、そのままだとレスポンシブ対応していません。
しかし、今はスマホでWebサイトを閲覧することが主流なので出来ればレスポンシブ対応させ、スマホでの表示を最適化させたいですよね。
この記事ではWebサイトに埋め込んだYouTube動画をレスポンシブ対応させる方法をご紹介したいと思います。
この記事の目次を表示
Webサイトに埋め込んだYouTube動画をレスポンシブ対応させる
まずは動画の埋め込みコードを取得します。
詳しい取得方法は以下の記事でご紹介しています。
取得した埋め込みコードをHTMLに貼り付けると以下のようになっています。
<iframe width="560" height="315" src="動画URL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>取得したコードにwidthとheightが絶対値で設定されている為、スマホで表示した時に画面サイズによっては画面を貫通してしまう現象が発生します。
Webサイトに埋め込んだYouTube動画をレスポンシブ対応させる場合は、以下のCSSを記述します。
iframe {
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
}常に横サイズを全画面表示させたい場合は以下のCSSを記述します。
iframe {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
}!importantを設定することでインライン指定してあるwidthとheightより詳細度が増し、打ち消すことが出来ます。
まとめ
いかがでしたか？
WebサイトにYouTube動画を埋め込む場合はこの対策をして、レスポンシブ対応させておきましょう。
