WordPressの投稿にURLだけでYouTube動画を埋め込む際のHTMLをカスタマイズする方法

Advertisement

wordpress-oembed-youtube

WordPressにはoEmbed という仕組みが導入されていて、たとえばYouTubeのURLを投稿の本文に入れるだけで、自動的に動画の埋め込みタグに変換してくれます。すごく便利なんですが、埋め込みコードの外側のpタグにclassを追加したり、iframeの属性をカスタマイズしたい場合、WordPressのフィルター機能 を使う必要があります。

今回はそのカスタマイズの方法をご紹介します。

WordPressでoEmbedでYouTube動画を埋め込むには

以下のURLを本文に書くと…

https://www.youtube.com/watch?v=IEsunlfXLig

自動的に以下のHTMLに変換されます。

<p><iframe width="500" height="281" src="https://www.youtube.com/embed/IEsunlfXLig?feature=oembed" frameborder="0" allowfullscreen></iframe></p>

これがデフォルトで書き出されるHTMLです。

WordPressが書き出すHTMLをカスタマイズする方法

たとえばYouTube動画をレスポンシブ対応させたい場合、書き出されるHTMLを調整したほうが簡単(シンプル?)です。僕の場合、widthheightの属性を削除して、最終的に書き出されるコードを以下のようにカスタマイズしました。

<div class="youtube"><iframe src="https://www.youtube.com/embed/IEsunlfXLig?feature=oembed" frameborder="0" allowfullscreen></iframe></div>

widthheight属性が記載されていても、CSSで強制的に幅と高さは調整できるんですけど、!importantを使うのが気持ち悪いので、コードを書き換えました。

functions.phpに関数を追加

WordPressが書き出すコードを書き換えるために、functions.phpに以下のフィルターを追加しました。

// Customize YouTube oEmbed Code
function custom_youtube_oembed($code){
  if(strpos($code, 'youtu.be') !== false || strpos($code, 'youtube.com') !== false){
    $html = preg_replace('/ width="\d+"/', '', $html);
    $html = preg_replace('/ height="\d+"/', '', $html);
    $html = '<div class="youtube">' . $html . '</div>';

    return $html;
  }
  return $code;
}

add_filter('embed_handler_html', 'custom_youtube_oembed');
add_filter('embed_oembed_html', 'custom_youtube_oembed');

さらに、以下の行を加えるとYouTube動画のオプションの設定をカスタマイズできます。

    $html = preg_replace("@src=(['\"])?([^'\">\s]*)@", "src=$1$2&showinfo=0&rel=0", $code);

たとえば、以下のような設定 を追加できます。

追加するパラメータ 設定
showinfo=0 動画のタイトルを非表示にする
rel=0 関連する動画を非表示にする
controls=0 プレーヤー コントロールを非表示にする

YouTube動画の表示設定を調整する場合、最終的にfunctions.phpに入れるコードは以下のようになります。ここでは動画のタイトルと関連動画を非表示にするためにshowinfo=0rel=0を追加しています。

// Customize YouTube oEmbed Code
function custom_youtube_oembed($code){
  if(strpos($code, 'youtu.be') !== false || strpos($code, 'youtube.com') !== false){
    $html = preg_replace("@src=(['\"])?([^'\">\s]*)@", "src=$1$2&showinfo=0&rel=0", $code);
    $html = preg_replace('/ width="\d+"/', '', $html);
    $html = preg_replace('/ height="\d+"/', '', $html);
    $html = '<div class="youtube">' . $html . '</div>';

    return $html;
  }
  return $code;
}

add_filter('embed_handler_html', 'custom_youtube_oembed');
add_filter('embed_oembed_html', 'custom_youtube_oembed');

CSSを追加

YouTube動画をレスポンシブ対応させるために、以下のCSSを追加しました。

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

これで埋め込まれたYouTube動画が、どの画面サイズでも画面比率(アスペクト比)をキープしたまま動画を内包するコンテナ要素の最大幅で表示されるようになります。padding-bottomが56.25%なのは、アスペクト比が16:9の動画に合わせるためです。横幅を100%とした時に、縦の比率を計算すると 100 : X = 16 : 9 → X = (9 x 100) ÷ 16 = 56.25 となるわけですね。

以上、WordPressがoEmbedで書き出すYouTube動画用のHTMLをカスタマイズしてレスポンシブ対応させる方法でした。お役に立てば幸いです。

参照サイト

以下のサイトを参照させてもらいました。ありがとうございました!

“WordPressの投稿にURLだけでYouTube動画を埋め込む際のHTMLをカスタマイズする方法” への1件のコメント

  1. […] WordPressの投稿にURLだけでYouTube動画を埋め込む際のHTMLをカスタマイズする方法 – Rriver […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です