FitVids.JS

JavaScript

YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVids.JS」

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の使い方についてでした。

関連記事

  1. Liquid Slider

    JavaScript

    タブパネル式のレスポンシブなjQueryスライダー「Liquid Slider」

    ちょっと珍しそうなスライダーを見つけたのでご紹介します。タブパネルにも…

  2. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

  3. How satisfied are you? Slider
  4. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  5. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  6. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2012年に紹介したjQueryプラグインのまとめ

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみまし…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP