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

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

具体的にやってみよう

試しに、ディズニー公式YouTubeチャンネルで公開されている「一緒に歌おう♪『アナと雪の女王』「Let It Go<歌詞付Ver.>」 松たか子」を埋め込みます。下のURLを、WordPressの投稿や固定ページの入力欄に貼り付けるだけでOKです。

https://www.youtube.com/watch?v=cvj3-MZO9Tw

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

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

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

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

<iframe width="500" height="281" src="https://www.youtube.com/embed/cvj3-MZO9Tw?feature=oembed" frameborder="0" 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」など付与して、今回ご紹介したコードに条件分岐を加えて、値が設定されていたら自動再生させる、とか、逆にさせないとか。または、ページ送り時にパラメーターを設定してもいいですね。

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

まとめ

attripの高橋さんと9post(最近450万PV/月超えたみたい。すごいな・・・)のよーいちくんと話してて話題になったことを書きました。両サイトとも記事に動画を利用する機会も多いんで、動画の見せ方はこだわりたいよね。そういう意味では、カスタマイズって必要になってくるよね~。

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

著者:bouya Imamura