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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

手順1:埋め込みコードの取得と修正

埋め込みたい動画を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)

修正後のコード例


手順2:コードに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を埋め込む時にレスポンシブに対応させる事ができます。
お疲れ様でした。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください