WordPressでYouTubeを埋め込む時にレスポンシブに対応させる方法

WordPressでYouTubeを埋め込む時にレスポンシブに対応させる方法を備忘録としてまとめておきたいと思います。

レスポンシブ対応させる方法

手順１：埋め込みコードの取得と修正

埋め込みたい動画をYouTubeで開き、共有ボタンから埋め込むをクリックしてコードを取得します。

コードの例

取得したコードはサイズの設定が width=”560″ height=”315″ になっているため、解像度に合わせてサイズを修正します。

1080p：width=”1920″ height=”1080″（1920×1080）
720p：width=”1280″ height=”720″（1280×720）
480p：width=”854″ height=”480″（854×480）
360p：width=”640″ height=”360″（640×360）
240p：width=”426″ height=”240″（426×240）

修正後のコード例

手順２：コードにCSSを設定する

取得・修正した埋め込みコードを<div>で囲って、CSSを設定します。
ここではdivのclassをYouTubeとします。

<div>で囲んだ後のコード例

この<div>で囲んだ後のコードを、WordPress記事上のカスタムHTMLブロックを使って載せます。

CSSのコードをWordPressに追加します。
追加する場所は
外観-カスタマイズの追加CSSに追記します。

.YouTube {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
}
 
.YouTube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

以上で、WordPressでYouTubeを埋め込む時にレスポンシブに対応させる事ができます。
お疲れ様でした。