投稿本文にYoutube動画の共有URLを埋め込むカスタマイズ＠WordPress

＊写真は本文とは関係ありません（Oisixで購入した「ケール」とチーズのサラダです、美味しかったです）

WordPressの投稿本文にYoutube動画の共有URLを記述すると、自動でiframe要素に変換され、フロント側（訪問者が閲覧する）に動画の再生ウィジェットが埋め込まれます。

Youtubeの共有URL

WordPressの投稿に共有URLを記述

変換されたhtmlソースはこのようになっています。

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

埋め込み動画をレスポンシブに対応させる

Youtube動画の共有URLが変換されるiframのhtmlソースを望む形に書き換えるためにフックを使ってfunctions.phpにコードを追加します。

functions.phpにフックを追加

/* Youtube動画の共有URLの変換をカスタマイズする */
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_container">' . $html . '</div>';

    return $html;
  }
  return $code;
}

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

iframeの親要素にclass名「youtube_container」をつけ、動画の再生オプションとして

• showinfo=0 : 動画のタイトルを非表示に
• rel=0 : 関連動画を非表示に

も追加しています。また、iframe要素のwidth, height属性をつけないようにしています。

レスポンシブに対応させるためのCSSを追加

/* Youtube動画をレスポンシブ対応 */
.youtube_container{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.youtube_container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

以上です。

これでYoutube動画の共有URLを投稿本文に記述すると、width, height属性をもたないiframe（class名「youtube_container」を持つdiv要素に囲まれた）要素と、動画再生オプションに「動画タイトル非表示」と「関連動画非表示」をつけた文字列が出力されるようになりました。

以下の解説のお世話になりました。ありがとうございます。

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