WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法

こちらのコンテンツは【クラシックエディー】向けのコンテンツです。
ブロックエディターを利用されている場合、下記のカスタマイズを加えずともYOUTUBE動画はレスポンシブに対応しています。

WordPressにYOUTUBE動画を埋め込む手順

まずは、YOUTUBEの動画をWordPressサイトに埋め込む方法をご紹介します。

YOUTUBEの動画を埋め込む時は、サイズや詳細な設定をすることもできるのですが、
今回は最も単純な方法をご紹介します。

その方法とは、YOUTUBE動画のURLをテキストエディタに貼り付ける方法です。

まずは、サイトに埋め込みたいYOUTUBE動画の再生ページにアクセスします。

動画プレイヤーの下部に【共有】というリンクがありますので、こちらをクリックします。

エリアが展開され、その中に【URL】が表示されます（上記画像の赤枠部分）。
このURLをコピーしましょう。

あとは、コピーしたURLをWordPress投稿画面の【テキストエディタ】から動画を埋め込みたい場所に貼り付ければ動画の埋め込みは完了です。

上記の手順が面倒な方は、動画再生ページのURLをコピーして使っても構いません。

URLを貼り付けた箇所に、上記の様に動画が表示されれば埋め込み作業は成功です。

WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法

続いて埋め込んだ動画をレスポンシブに対応させる方法をご紹介します。
YOUTUBE動画は単に埋め込んだだけではレスポンシブに対応されません。

レスポンシブに対応するとは、デバイスの横幅に合わせて動画が縮小表示されることです。
単に設置しただけですと小さいデバイスの場合、動画がはみ出してしまいます。

動画をレスポンシブに対応させるためには、以下の2つの作業を行います。

YOUTUBE動画の埋め込みコードを自動的にdivタグで囲む

YOUTUBEの動画をレスポンシブに対応させる場合、埋め込みコードをdiv要素で囲む必要があります。
このdiv要素がレスポンシブ対応のきもです。

このコードを埋め込みコードを設置するたびに書き込むのは非常に面倒です。
そこで、埋め込みコードを記述すると自動的に囲まれるようにカスタマイズしましょう。

カスタマイズはコピペだけでOKです。
functions.phpに以下のコードをコピペしてください。

このコードを埋め込むことで、YOUTUBEの埋め込みコードを設置すると、自動的に【<div class=”youtube”>】で囲まれるようになります。

CSSでYOUTUBE動画をレスポンシブに対応させる

YOUTUBEをレスポンシブに対応させるのは、CSSの定義だけでOKです。

先ほどfunctions.phpにコードを埋め込んだことで、YOUTUBEの埋め込みコードを記述すると自動的に【<div class=”youtube”>】で囲まれるようになっています。

そのため、埋め込まれたYOUTUBE動画の部分は以下の様なHTMLになっています。

そこで、以下の様にCSSを定義することで埋め込んだ動画をレスポンシブに対応させることができます。

上記のコードの解説は今回は省きます。
内容が少々複雑なので、逆に難しく感じるかと考えたためです。

ひとまず、ここまでの作業で埋め込んだYOUTUBE動画はレスポンシブ対応となりました。
どの様な感じになるのかは、このコンテンツの上部に設置してある動画をご覧ください。

PCで観覧中の方は、ブラウザのサイズを縮小拡大してみてください。
横幅に合わせて動画が縮小拡大されているのが確認できます。

スマホで観覧中の方は、デバイスの向きを縦横と変えてみてください。
横幅に合わせて動画が縮小拡大されているのが確認できます。

まとめ

WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法をご紹介しました。

ちょっと難しいように感じたかと思いますが、実際は簡単な作業です。
一度設定しておけば、今後は全てのYOUTUBE動画がレスポンシブ対応になります。

この機会にカスタマイズしてみてください。