レスポンシブWebデザインのサイトにYouTube動画を設置するには、１番簡単な方法として、YouTubeサイトで、埋め込みコードが用意されているので、そのiframeをHTMLに追加すればOKです。
WordPressでは、YouTube動画のURLを本文に記入するだけで、URL文字がそのiframeへ自動的に変わってくれるので更に便利です。
ですが、残念ながらこれではレスポンシブWebデザインのように動画が縦横比を保ちつつ、ウインドウ幅にあわせて伸縮してくれません。
そこで下記のようにすれば、iframeもウインドウ幅にあわせて伸縮してくれます。
/**
* WPの自動embedをレスポンシブに
*
* see: wp-includes/class-wp-embed.php
*/
function my_responsive_embed_oembed_html($return, $url, $attr, $post_ID ) {
return sprintf('<p class="wp-oembed">%s</p>', $return);
}
add_filter('embed_oembed_html', 'my_responsive_embed_oembed_html', 10, 4);
/* ----------------------------------------------------------------
=.wp-oembed
---------------------------------------------------------------- */
.wp-oembed {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.wp-oembed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
実装例
ウインドウ幅を変えてみて、伸縮を確認してみてください。
でも、これだと表示が重い(このページも重い、特にモバイルでは…)ので、筆者はよくWordPressプラグイン「Advanced Responsive Video Embedder」のサムネイル表示を使って、自サイトには、動画のサムネイル画像だけで、クリックまたはタップすると、その動画が全画面表示という手法を使っていました。
ところが、Advanced Responsive Video Embedder(以下、ARVEといいます)のver5.4.2を最後に、FreeのARVEではサムネイル表示ができなり、iframeしかモードを選択できなくなってしまいました(TT
これじゃあ、ARVE入れる意味ないじゃん。iframeだったら、functions.php＋CSSでイイんじゃね？ｗ
サムネイル表示したくば、有料であるproを買えと！ｗ
そこで、仕方なく、自作して同じようなサムネイル表示をするWordPressプラグインを作りました。ついでに、TinyMCEプラグインとしても動作するようにしました。
ところが、ARVEのときからでしたが、iOS/Androidで、YouTubeにアクセスしてもブラウザ上で再生されるだけで、アプリが代わりに動いてくれません。特にiOSで。ARVEのa要素のhrefでは、下記のようなURLになってました(ｅが全角なのは、このサイトのWPのoembedが反応してしまうからで、実際は半角です)。
http://www.youtubｅ.com/embed/(動画のID)?autoplay=1
どうやら、iOSでは「iPhone URL Schemes」というパターンに応じて、アプリが代わりに動いたりしているようです。これにこのパターンが入ってないようで、下記のような形式にすればOKのようです。
<!-- 動画１つの場合 --> http://www.youtube.com/watch?v=(動画のID)&autoplay=1 <!-- プレイリストの場合 --> https://www.youtube.com/watch?v=(動画のID)&list=(リストのID)&autoplay=1
初期表示で動画が全画面表示ではなくなってしまいましたが、ブラウザの代わりにアプリで見れるので、お気に入りにも入れやすいし、評価も入れれるし、チャンネルも登録できるし、ボタンをタップすりゃ全画面も表示可能だし…普段使ってる使用感で動画が見れるのでこっちの方がよいと感じました。
でも、さらに、問題発生で、なぜかChrome(iOS版)で、プレイリストが再生されず、「動画のID」で指定した動画のみが再生されてしまいます。これは、仕様なのでしょうか？バグなのでしょうか？
苦肉の策として、筆者はjQueryを使って、下記のような感じで、半ば強引に対策しましたｗ これで良いんだろうかｗ
<a target="_blank" class="yvelx-inner" data-orig-param="watch?v=(動画のID)&list=(リストのID)&autoplay=1" href="//www.youtube.com/watch?v=(動画のID)&list=(リストのID)&autoplay=1">動画再生</a>
jQuery( function( $ ) {
// fix chrome(iOS)
( function() {
var ua = window.navigator.userAgent.toLowerCase();
// fix chrome(iOS) youtube playlist
if (((ua.indexOf('chrome') != -1) || (ua.indexOf('crios') != -1)) && ((ua.indexOf('iphone') != -1) || (ua.indexOf('ipod') != -1) || (ua.indexOf('ipad') != -1))) {
$('a.yvelx-inner').each(function(){
var $t = $(this);
var param = $t.data('orig-param');
if (param.indexOf('list=') != -1) {
$t.attr('href', 'youtube://' + param);
}
});
}
} )();
} );
いちおう最終的な実装例
ウインドウ幅を変えてみて、伸縮を確認してみてください。