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

2014/07/13

Category：tips

著者:bouya Imamura

WordPressの埋め込み機能をもっと便利に使いたい場合はこれでOK

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」など付与して、今回ご紹介したコードに条件分岐を加えて、値が設定されていたら自動再生させる、とか、逆にさせないとか。または、ページ送り時にパラメーターを設定してもいいですね。

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