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.06.24
571
WordPress プログラミング

【簡単】Advanced Custom Fieldsを使い、手動で任意の関連記事を出力するフィールドを導入

2022.03.21
611
WordPress

WordPressで投稿機能からタグ表示を消す方法

2022.07.21
248
WordPress

WordPressでinputタグの入力欄にNotice: Undefined index: name in エラーがでる原因・改善方法

2022.10.12
122