WordPress plugin Advanced Responsive Video Embedderのススメ

2015/07/26 追記
[悲報] 現在、Advanced Responsive Video Embedderはアップデートされて、基本的な部分は無料ですが、以下の記事に書いてあるような機能を利用するには別途proバージョン(アドオン)が必要になったという話です。
まだlazyloadやthumbnailが機能するバージョンを利用している方は、アップデートを激しくオススメしません。

基本的な部分が無料と言う話ですが、それならwordpressが自前で持ってる機能でいいじゃんって話なので、これからレスポンシブ対応の動画プラグインを探す・試す・利用すると言う人にはこのプラグインはお勧めできません。あしからずご了承ください。

前に同じような事を書いてたんだけれど、その記事が無くなってしまったので再度書いておきます。
Youtubeやら、DailyMotion、vimeoとかの動画をWordpressに貼りたい時ってありますよね。最近のWordpressではデフォルトでメディアを貼り付けることができるようになってますけども、まぁ簡単に動画を貼り付けたい、更にはレスポンシブで行きたいと言う場合も多々あります。

現在利用させてもらってるWordpressのテーマSimplicityではver20140722あたりでYoutubeとかのiframeを使った動画の貼り付けもレスポンシブでできるようになったようです。

ただまぁ、他のテーマを利用している人にもまたSimplicityを利用している人にも色んな場面で簡単に使えるプラグインとしてAdvanced Responsive Video Embedderと言うのをオススメしてみたいなぁと思います。

Simplicityで利用する際の注意点

まだ不確かな情報ではあるのですが、おそらく親テーマのstyle.css内にある、

この部分をコメントアウトしておかないと、埋め込みの際にボタンが上にズルリとズレてしまって動画が再生されないかと思います。なんとか上の方でボタンをクリックできたら再生は始まるのでrelativeがダメなのかtop:1pxがダメなのかは定かではないですが、もしAdvanced Responsive Video Embedderを利用するのであればひとまずコメントアウトしておく方が良いと思います。ボタンクリックでアクティブの時に何か反応させたい場合は、親になる要素(#TESTみたいなの)を指定して、子テーマあたりに「その親の時のボタンのアクティブはどうする?」というようなCSSを書いた方が良いかも知れません。このあたりはいずれ公式でも対応してくれるでしょう。

更に、あまり関係ないかも知れませんが、今回のAdvanced Responsive Video Embedderは基本iframeを操作するプラグインでもあるので、せっかくのテーマにてiframeの対応がなされていますが、敢えて心を鬼にして…コ、コメントアウトで(どこかの通販の社長風)。

  • 親テーマ/css/media内 instagram以外はコメントアウト(念の為)
※functions.php内でもiframe関係の関数はありますが、動作させていてもこのプラグインでは特にコンフリクトは無さそうです。

WordPressの動画の貼付け方

WordPressでは、動画のアドレスを入れるだけで埋め込むことができます。

こんな感じ。対応しているフォーマットは、

blip.tv
Bunkr
DailyMotion
Flickr
FunnyOrDie.com (WordPress 3.0)
Hulu
Instagram (WordPress 3.5)
Qik
Photobucket
PollDaddy
Rdio (WordPress 3.6)
Revision3
Scribd
SlideShare (WordPress 3.5)
SmugMug (WordPress 3.0)
SoundCloud (WordPress 3.5)
Spotify (WordPress 3.6)
Twitter (WordPress 3.4)
Viddler
Vimeo
YouTube
WordPress.tv

こんなにあるのでだいたいの動画はいけそうです。中には見慣れぬサイトもあったりしてたりしますね。

他にも動画を色々と操作して埋め込むためのembedショートコードもあれば、Youtubeでの埋め込みコードをそのまま使ったりもあります。ショートコードは [ で始まる簡単なコマンドみたいなものです。Advanced Responsive Video Embedderでも独自のショートコードが利用されています。
このあたりの操作やショートコードはどういうものか、どんなものがあるかは他のサイトに任せるとして、以下Advanced Responsive Video Embedderの説明をしてみようかと思います。

Advanced Responsive Video Embedder

Advanced Responsive Video Embedderの特徴として、動画の埋め込み時に直接埋め込むかあるいはサムネイルで埋め込むかを指定することができます(埋め込みモード選択)。
ページの表示は動画プレイヤーを直で埋め込むよりもサムネイル表示のが速いはずですから動画の読み込みによって待たされることはありません(lazyload・thumbnailモード選択時)。

基本的には、動画プレイヤーを埋め込んだ場合、そのサイズで動画が再生されます。大きく見たい場合はその動画のサイトにプレイヤー内のリンクで飛んで本家で動画を見ることになってしまいます。それを解決するのがこの後説明するサムネイル表示です。

そのサムネイルや動画を左右に配置することもできます。

例えば、こんな感じで右寄せにすることもできます(右の動画はlazyloadモード)。サイズの指定やあるいは自動的に再生させるか、どちらに寄せるか、表示は埋め込みかサムネイルかをプラグインを入れると管理画面のエディターの上にEmbed Videoと言うボタンができるので簡単な操作でショートコードを埋め込むことができるわけです。必要なのはその動画のアドレスだけ。


もし、貼り付ける方法をサムネイルにした場合は、左のような感じで画像が貼り付けられ、クリックをすることでlightboxやcolorboxのようにモーダル上に動画プレイヤーが表示されて再生できるようになります。
モーダルとは、新しい画面が1枚できてその中に動画が入っているレイのアレです。左のがサムネイルですのでクリックして一度お試し下さい。見れば、これかとすぐに理解できるはず。
むさ苦しいMarvin Gayeからはおさらばして、SwordArtOnline2のop「IGNITE(Extended Version)」を貼っておきます。サムネイルをクリックしてから開くモーダルもレスポンシブで設定したアスペクト比で画面に表示されます。大きな画面であればそれだけ大きなモーダルが出てきて縦横比を保ってくれるということです。

注意: 上記のように左右に動画を入れた場合、文字の回り込みの関係で、例えば上の状態なら左寄せにした後の文字がメインの表示位置から一部はみ出してサイドバーに隠れるようになってしまう場合があります。そういう時は、右寄せにした動画左側部分の文章量を多めにするか、あるいは右寄せにした動画の下辺りに <br style=”clear:both;” />と言う改行で回りこみ解除のタグを入れて下さい。これは画像の場合も同様です。
原理としては左・右寄せにする場合に横に回りこむ文字には<p>タグが入らないことに起因しています。<p>が入ればそれだけで改行してしまいますから回り込みができないわけです。そのために回りこみのある文章には<p>が入らない仕様が一般的になってます。そうさせない方法はあるにはある(ボソ

Screenshot_from_2014-11-14-055746操作部分は、こんな感じでエディターの上のEmbedVideoのボタンから開きます。ここの上部エリアにYoutubeなどのアドレスを入れると最下部のInsertShortcedeボタンの上に実際挿入されるショートコードが自動的に表示されます。ここで確認等をしてInsertShortcedeを押すとエディタのカーソルの部分に挿入されます。

長ったらしいDailyMotionのアドレスもブラウザのアドレス欄から全部コピペして貼り付ければショートコードに整形してくれます。それらの設定もプラグインのオプションからできますが基本デフォルトで問題ありません。

modeにあるLazyLoadは、いったんサムネイル表示にしておいてクリックされたら動画プレイヤーをそこに読み込むと言うものです。通常はこれで良いと思います。normalの場合普通の動画プレイヤーが埋め込まれます。すぐに見たいサムネイルから動画プレイヤーを読み込むほんの1〜2秒程度すら待ってられないと言う場合はnomalでも良いかも知れませんが、lazyloadの方がページ読み込みのパフォーマンスも良いのではないかと思われます。結局動画プレイヤーは読み込まないと表示できないんですから、最初からプレイヤーで表示を待たされるか見たい時に読み込んで待つかの違いだけです。

ショートコードをエディターに挿入した後、右寄せしたかったのに左寄せになってしまったとなっても、またやり直す必要はなく、以下のalignの部分をエディタで修正すればすぐに右でも左でもできます。
[dailymotion id=”x24iz0s” align=”left” mode=”thumbnail” autoplay=”no”]
※便宜上[]は全角文字にしてます。

このショートコードの法則がわかっていればエディタ上部からEmbedVideoのボタンを押さずとも書けるようになります。
確か、動画サイトの識別名とidだけ書けばアスペクト比維持で横幅100%表示になったはずだけども・・・


はい、なりました。テスト用に60fpsが正式に始まったYoutubeより、Dragon Nest Dragon Fellowship lvl 70 60fps Gear Master(after revamp)を貼り付けておきます。

[youtube id=”Ks2_o9OvntE”](注[]は全角で表示用に書いてます。)これだけでlazyloadの横100%表示になります。

対応している動画フォーマットなどは、

4players.de
archive.org
blip
break
CollegeHumor
Comedy Central
dailymotion
flickr
Funny or Die
gametrailers
iframe
IGN
kickstarter
LiveLeak
metacafe
movieweb
MPORA
myspace
MyVideo
snotr
spike
TED Talks
twitch
USTREAM
veoh
vevo
viddler
videojug
vimeo
Vine
XTube
Yahoo Screen
YouTube

こんな感じです。デフォルトでWordPressが対応しているものよりはやや多いようです。まぁ知らないサイトもたくさんありますが。

貼り付ける画像を加工するのが面倒くさいとか、動画で丁度いいのがあるんだけど・・・と言う場合は迷わず利用したほうが良いのではないかと思ったりします。オススメです。

別件で

そういやSimplicityのcssを色々探している時(動画の再生ボタンがクリックできなかったので調べてた時)に親テーマ/css/extension.cssと言うのを見つけた。公式にもレイアウト例であったのでどうやって出すんだろうとは思っていたけど、ここに書いてあったのかと言うことで、ひとまず忘れないように書いておこうかと思います。

<div class=”sp-primary”></div>
<div class=”sp-success”></div>
<div class=”sp-info”></div>
<div class=”sp-warning”></div>
<div class=”sp-danger”></div>

<span class=”marker”></div>

スポンサーリンク

シェアする

フォローする