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

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を調整したほうが簡単（シンプル？）です。僕の場合、widthとheightの属性を削除して、最終的に書き出されるコードを以下のようにカスタマイズしました。

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

widthとheight属性が記載されていても、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);

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

YouTube動画の表示設定を調整する場合、最終的にfunctions.phpに入れるコードは以下のようになります。ここでは動画のタイトルと関連動画を非表示にするためにshowinfo=0とrel=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をカスタマイズしてレスポンシブ対応させる方法でした。お役に立てば幸いです。

参照サイト

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

• Modify Youtube Oembed URLs to remove showinfo and more （WordPressのフィルターのカスタマイズについて）
• oEmbed.com （oEmbedの仕様について）
• oEmbed — WordPress Codex 日本語版
• 関数リファレンス/add filter — WordPress Codex 日本語版

2016年7月20日に公開され、2017年2月25日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存