YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させることができるjQueryプラグイン「FitVids.JS」を使ってみました。かなり便利なので、今後使う機会が増えてくるかと思います。一般的には埋め込みタイプの動画は固定サイズになっているので、レスポンシブに対応させるためには、こういったプラグインを活用していくことが作業コストの面でもベストな選択だと思います。以下、使い方です。
[ads_center]
使い方
head内に、jQuery本体とダウンロードしたプラグインを読み込み、FitVids.JSを設定します。セレクタに指定してある任意のid(ここではsample）は動画を内包する親要素を指定します。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.fitvids.js"></script>
<script>
$(document).ready(function() {
$("#sample").fitVids();
});
</script>
続いてHTMLです。
<div id="sample">
<!-- ここにYouTubeやVimeoの埋め込みコード -->
</div>
たったこれだけで、埋め込んだ動画をレスポンシブにしてくれます。これはかなり便利ですね。
使い方もこれ以上ないくらいシンプルで使いやすいプラグインです。動画閲覧は、スマホや高速通信サービスの普及とともに右肩上がりなので、色んなデバイスに対応できるこういったプラグインは今後重宝していくことは間違いないですね。
ということで、FitVids.JSの使い方についてでした。
FitVids.JS – A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
