FitVids.JS – 動画をレスポンシブに対応させるライブラリ // MOONGIFT Archived

レスポンシブなWebデザインを考える時に若干面倒なのが動画の埋め込みです。YouTubeやVimeoでは動画を埋め込むためのiframeタグを配布していますが、これがwidth/height固定でレスポンシブでなかったりします。解決策としてはスタイルシート指定もあるのですが、単純にwidth指定では横長で左右の黒い部分が多い動画になってしまいます。そこで使ってみたいのがFitVids.JSです。埋め込み例。YouTube動画です。幅を縮めた例。Vimeoも対応しています。 Kickstarterのウィジェットはうまくいかない模様。動画はうまくいきます。使い方は簡単で、動画のクラス/IDを指定して実行するだけです。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    $("#thing-with-videos").fitVids();
  });
</script>

対応している動画サービスは下記の通りです。

YouTube
Vimeo
Blip.tv
Viddler
Kickstarter

ウィンドウの幅を変更すると動画の幅がシームレスに変わっていくのが便利ですが、動画サービスによっては動作が再生が止まってしまう場合があるようです（YouTubeは再生し続けました）。ご注意ください。 FitVids.JSはjQuery/JavaScript製のソフトウェア（ライセンスはWTFPL）です。 FitVids.JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds. davatron5000/FitVids.js