Vimeo のレスポンシブ対応
前回、「Vimeo のサムネイル表示方法」という記事を書きましたので、Vimeoの画像ではなく動画を埋め込む場合の実装方法についても書いていきたいと思います。動画を載せるならもちろんレスポンシブ対応は必須となるのですが、Vimeoの場合、動画縦横比がバラバラなので一工夫が必要です。今回は前回書いた記事の内容も絡んでくるのでよければ前回記事も読んでくれると嬉しいです。
Vimeo動画を埋め込む
動画の埋め込みは、vimeoの「共有」からiframeのコードをゲットしてきます。
こんな感じのコードが取れるかと思います。
<iframe src="https://player.vimeo.com/video/動画ID" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
このコードを入れるだけで動画をサイトに載せることができます。さて、ここからレスポンシブ対応をしていくのですがその方法には2つあります。1つ目は、Vimeoのiframe所得時に「レスポンシブ」オプションをつけることでiframe自体にインラインでスタイルをつける方法。2つ目は、自分で動画の縦と横の幅を取得し、スタイルをつけていく方法です。
動画のオプションでレスポンシブ対応
オプション付のiframe所得方法は、Vimeoの 共有 > オプションを表示 で Responsiveにチェックを入れると動画の縦横比を考慮したソースコードが出てきます。
埋め込み結果はこんな感じです。
Nepal from Ryan Flett Media on Vimeo.
動画のサイズを取得し自分でスタイルをつけてレスポンシブ
せっかく自分でスタイルをつけるので、埋め込む動画を変更したらその動画の縦横比に合わせてpaddingの比率も変わっていくような実装をしてみます。なので、「動画IDを入れるinput」「動画IDを反映させるボタン」「動画」の3つを入れていきます。
※動画IDとは、各動画についている識別IDのことです。iframeに書かれている動画IDを変更することで、埋め込む動画を変更することができます。
HTML
動画をレスポンシブ対応させるには、iframeの外側に一つdivを用意しておきましょう。
<!-- 動画IDを入れるところ -->
<div class="vimeo-id-outer">
<input type="text" name="vimeo-id" value="初期画面に表示させる動画ID" class="js-vimeo-id js-video-change-id"><button class="js-video-change-btn">動画ID変更</button>
</div>
<!-- 動画を表示 -->
<div class="video-outer js-vimeo-outer">
<iframe class="video js-video-change" src="https://player.vimeo.com/video/初期画面に表示させる動画ID" frameborder="0" allowfullscreen></iframe>
</div>CSS
iframe外側のdivの高さは0にしておき、padding-top または、padding-bottom に動画の縦比率を設定します。動画の縦比率は「縦幅÷横幅×100」で算出します。今回デモで使用する動画の比率は56.25%だったのでその値を設定してあります。
iframeはposition:absoluteし、外側のdivをposition:relativeします。
<style>
.vimeo-id-outer input {
margin-right: 10px;
margin-bottom: 10px;
}
.vimeo-id-outer button {
margin-bottom: 10px;
}
/* iframe外側のdiv */
.video-outer {
position: relative;
height: 0;
padding: 0 0 56.25%;
overflow: hidden;
margin-bottom: 20px;
}
/* iframe */
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
}
</style>JavaSvript
動画の縦と横の幅は、前回記事「Vimeo のサムネイル表示方法」でも使用した、oEmbed API で取得することができます。JSON形式で持ってくることができるので、jQueryの $.getJSON を使うのがいいかと思います。
JSON情報に何が載っているかは、Vimeoのデベロッパーサイト に詳しく載っています。動画の縦と横の幅は「.width」と「.height」で取得することができます。
<script>
$(function(){
// Vimeoのレスポンシブ
var vimeoID = $('.js-vimeo-id').val();
$.getJSON(
'https://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoID,
null,
function(data) {
var vimeoWidth = data.width;
var vimeoHeight = data.height;
var vimeoSize = (vimeoHeight / vimeoWidth) * 100;
$('.js-vimeo-outer').css('padding-bottom', 'vimeoSize' + '%');
}
);
// 動画を変更
$(document).on('click', '.js-video-change-btn', function() {
var val = $('.js-video-change-id').val();
$('.js-video-change').attr('src', "https://player.vimeo.com/video/" + val);
});
});
</script>完成品のデモ
上記ソースコードで実装するとこんな感じに仕上がります。
下のデモに入っている動画IDを変更し[動画IDを変更]ボタンをクリックすると、表示している動画を変更することができます。良ければ試してみてください。動画IDを取得するにはVimeoの会員登録が必要です（無料アカウントも作成できます）。
