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

cheero Power Plus 2 10400mAh大容量モバイルバッテリー「cheero Power Plus 2 10400mAh」購入レビュー前のページ

Macのウィンドウサイズで縦横を同じ比率のまま変更するやり方次のページMacのウィンドウサイズを縦横同じ比率で変更

関連記事

  1. bcralnit.js
  2. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  3. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  4. TabTab.js

    JavaScript

    アニメーション付きで切り替わるjQueryのタブプラグイン「TabTab.js」

    TabTab.jsは素敵なアニメーション付きのタブコンテンツを実装する…

  5. no-image
  6. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

コメント

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

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP