[html css]ユーチューブをレスポンシブに埋め込む方法

ユーチューブをサイトに埋め込むまではできるけどレスポンシブ対応されなく、みきれてしまう。。

このような疑問に答えます!

本記事ではhtmlcssのみでレスポンシブにユーチューブを埋め込む方法についてコードペンで紹介します。

以下コードペンデモです

See the Pen YouTube埋め込み by Kohei (@kouk05) on CodePen.0

上記html、cssをコピペして表示を確認してください。
スマホ時も見切れる事無くレスポンシブに表示されたかと思います。
.VideoWrapperに指定しているpadding-bottom: 56.25%;が肝でアスペクトを計算し縦横比を維持したままデバイス可変に対応してます。
以下参考サイト様で横幅、縦幅の入力値(埋め込むユーチューブの縦横値)元に計算しアスペクト比を出してくれるのでこちらを元にpadding-bottomの値を変更してくだい。
https://aspect.arc-one.jp/

Ads

関連記事

WordPress プログラミング

ワードプレスでヘッダーテンプレートをページによって分けたい時

更新日:2019.11.29
77
WordPress プログラミング

Breadcrumb NavXTをカスタマイズ。パンくずにメインサイトを追加する方法。

2022.01.04
132
WordPress プログラミング

【wordpress投稿】アイキャッチではなく最初の画像をサムネイルにする方法

更新日:2021.10.26
94
WordPress プログラミング

【htaccess・プラグイン不要】WordPressの投稿記事をhtmlのmetaタグでリダイレクトする方法

2022.04.04
33