WordPressにYouTubeの動画URLをペラッと貼り付けただけで自動再生などのパラメーターをお好みで付ける方法

カスタマイズ情報など このページをあとで読む

WordPressの埋め込み機能を使うと、例えばYouTubeの動画URLを貼り付けるだけで自動で投稿や固定ページ内に埋め込むことができます。

具体的にやってみよう

試しに、2018年の夏頃から始めた僕の YouTube チャンネルの動画 初心者向け Gutenberg #1】WordPress 5.0 のアップグレードと Classic Editor のインストール・設定方法の解説 を埋め込みます。下のURLを、WordPressの投稿や固定ページの入力欄に貼り付けるだけでOKです。

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

（貼り付けるとき「URLにはリンクを貼らない」とか、少し気を付けることがあります。コツは 埋め込み機能 で確認ください）

うまく貼りつけると、下のように動画が埋め込まれます。

こんな感じで自動で動画が埋め込まれる

埋め込まれた動画のhtmlコード（以下「埋め込みコード」と呼ぶことにします）は、下のような感じです。

<iframe width="865" height="487" src="https://www.youtube.com/embed/fj0XYEtBTsg?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

ここまでの流れをまとめると「YouTubeの動画URLを貼り付けるだけで、埋め込みコードが生成される」っていう仕組みですね。埋め込み機能 は、便利！

以上が長い前提で、以下が本題です。

埋め込みコードに自動でYouTubeで使えるパラメーターを付けてみよう

ところでYouTubeは、埋め込みコードにパラメーターを指定することができるんですよね。例えば、

  • 字幕をオン・オフにしたり（cc_load_policy）
  • ページを開いたら自動で再生したり（autoplay）
  • 動画の再生などのコントロールの表示・非表示を設定したり（autohide）
  • 動画再生後の関連動画の表示・非表示を設定したり（rel）
  • キーボード操作の有効・無効を設定したり（disablekb）
  • JavaScript APIを有効にしたり（enablejsapi これ。これ個人的にはめちゃくちゃ大事）

上記は一例なので、詳しくは「YouTube 埋め込みプレーヤーとプレーヤーのパラメータ」でどんなパラメーターがあって、どんなことができるのか確認できます。

動画URL貼り付け→自動で好きなパラメーターをつけたい

せっかくパラメーターが使えるんだから「WordPressの埋め込み機能を使ってYouTubeの動画URLを貼り付けるだけで、自動で好きなパラメーターを付与したい」と思いました。

ちょっと文章で説明がヘタなので具体例を・・・埋め込みコードに「自動再生」のパラメーターを付与する場合は下のようなコードでできます。ご使用のWordPressテーマフォルダ内にある「functions.php」の最後尾などに追記します。（functions.php の書き方についてはこちらをご参考ください。）

埋め込みコードに「自動再生」のパラメーターを付ける

if ( !function_exists( 'custom_embed_param' ) ) {
 function custom_embed_param( $html, $url, $attr ) {
  if ( strpos( $html, 'feature=oembed' ) !== false ){
   return str_replace( 'feature=oembed', 'feature=oembed&autoplay=1', $html );
  } else {
   return $html;
  }
 }
}
add_filter( 'embed_oembed_html', 'custom_embed_param', 10, 3 );

やっていること

埋め込みコード内に文字列「feature=oembed」を見つけたら、「feature=oembed&autoplay=1」に置き換えているっていう、シンプルな処理です。このコード、応用すればいろいろできますよね。

これで、YouTubeの動画URLをペラッと貼り付けるだけで、自動再生のパラメーターがつきます。埋め込みメディアをもっと厳密にチェックしたい場合は、YouTubeのurlを正規表現などを使って、条件分岐をしてあげるといい感じですね。

こんな調子で「YouTube 埋め込みプレーヤーとプレーヤーのパラメータ」で使えるパラメーターを確認しながら、「feature=oembed」の後に付与したいパラメーターをお好みで指定しましょう。で、WordPressのフィルターフック「embed_oembed_html」でフックさせれば完了、という流れです。

コードの使いどころ

今回ご紹介した自動再生のパラメーターを付けることで、動画コンテンツがメインのサイトや、最近流行りのバイラルメディアなどで「ユーザー操作として、動画再生の1アクションを減らす」こともできますね。

ちなみに自動再生を応用させると

これも例えばですが、Twitter,Facebook,Google+などソーシャルからの流入の場合は、URLのパラメーターに「autoplay_social=1」など付与して、今回ご紹介したコードに条件分岐を加えて、値が設定されていたら自動再生させる、とか、逆にさせないとか。または、ページ送り時にパラメーターを設定してもいいですね。

「ちょっとした工夫で自動再生のタイミングも制御できるよ」ってことが少しでも伝わると嬉しいです。使い方次第ってやつですね！

まとめ

記事に動画を利用する機会が多い方にとっては、動画の見せ方はこだわりたいですよね。そういう意味では、カスタマイズって必要になってきますよねぇ。

もし需要があれば、プラグイン化もしてみようかな～とは思います。作ったら使ってもらえそうですかね。というわけで、何かのご参考となりましたら幸いです。

著者:bouya Imamura