tee-suzuki.com

a-blog cmsのビデオユニットでVimeoの動画を埋め込んでみよう

Vimeo トップページ

Vimeo

a-blog cmsでは標準では動画の埋め込み用ユニットはYouTubeを使用するようになっていますが、他の動画サービスを使って埋め込みをしたいということもあるかと思います。今回は、a-blog cmsのビデオユニットを使って、高画質でオシャレな動画が多いと噂のVimeoを使った動画埋め込みをしてみたいと思います。

ユニットに登録するのはビデオのID

動画サービスは基本的に個別の動画に対してIDが付けられています。ビデオユニットの情報として登録するのは、このIDとなり、IDはURL欄で確認できます。

YouTubeでは、watch?に続くv=********** の部分がIDとなります。
Vimeo では、ドメイン直後の数字部分がIDとなります。

例）

YouTube　https://www.youtube.com/watch?v=AbWxo0m5sj0
Vimeo　http://vimeo.com/99370876

unit.html を変更

ビデオユニットで使用するサービスを変更するためには、ユニットの表示用テンプレート unit.html への変更が必要です。
unit.html は、 /themes/system/include/unit.html にあります。
変更を加える場合は、使用しているテーマ内の include以下にコピーして変更するとよいでしょう。

作業前

<!-- Video -->
<div class="column-video-{align}" {display_size}[raw]>
	<div class="column-iframe">
		<iframe width="{x}" height="{y}" src="http://www.youtube.com/embed/{videoId}?wmode=transparent" frameborder="0" allowfullscreen></iframe>
	</div>
</div>
<!-- END unit#video -->

これはYouTubeのための埋め込みコードとなります。この部分をVimeoの埋め込みコードを参考に書き換えます。埋め込みコード中のIDとなる数字の部分と、高さ、幅についてをa-blog cmsの変数と置き換えます。

作業後

<!-- Video -->
<div class="column-video-{align}" {display_size}[raw]>
	<div class="column-iframe">
		<iframe src="//player.vimeo.com/video/{videoId}?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;color=dedede" width="{x}" height="{y}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
	</div>
</div>
<!-- END unit#video -->

これで、ビデオユニットを使ってVimeo IDを入れてVimeo動画が表示できるようになります。
ただし、これは一般向けの表示部分になりますので、もうひとつ編集画面のためのunit.html も同様に変更しておきましょう。

unit.html は、 /themes/system/admin/entry/unit.html にあります。
こちらも表示用と同じく変更を加える場合は、使用しているテーマ内の admin以下にコピーして変更するとよいでしょう。

編集用の場合、サイズに変数を使ってしまうと大きくなってしまうので、こちらは固定としましょう。

<iframe src="//player.vimeo.com/video/{videoId}?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;color=dedede" width="240" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
編集画面

編集画面にも組み込み

実際にVimeo動画を埋め込んでみました

なるほど、確かに高画質かつシャレオツですね。
Vimeo動画の埋め込み、是非みなさんも使ってみてください。

RSS 2.0 Login