ITエンジニア/デザイナ向けにオープンソースを毎日紹介

レスポンシブなWebデザインを考える時に若干面倒なのが動画の埋め込みです。YouTubeやVimeoでは動画を埋め込むためのiframeタグを配布していますが、これがwidth/height固定でレスポンシブでなかったりします。

解決策としてはスタイルシート指定もあるのですが、単純にwidth指定では横長で左右の黒い部分が多い動画になってしまいます。そこで使ってみたいのがFitVids.JSです。

埋め込み例。YouTube動画です。
埋め込み例。YouTube動画です。

幅を縮めた例。Vimeoも対応しています。
幅を縮めた例。Vimeoも対応しています。

Kickstarterのウィジェットはうまくいかない模様。動画はうまくいきます。
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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2