Written by Kasumi

[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/

目次

関連記事

WordPress

WordPressで検索した文字列をハイライトする方法

2022.07.31
2586
WordPress

【簡単】wordpressのアーカイブでタイトルの文字数を制限して表示、3点リーダーを付ける方法

更新日:2022.07.15
1977
WordPress プログラミング

【popular posts】WPP_Queryクラスを使い、ランキングをカスタマイズして表示しよう。

2021.10.20
2951
WordPress

一覧ページでページネーション をつける【wp_query】【ワードプレス】

更新日:2019.11.28
1339