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. JavaScript

    レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」

    Slider Proはレスポンシブやタッチ・スワイプに対応したスライダ…

  2. jQuery Video Extend

    JavaScript

    動画をチャプターごとに区切れる「jQuery Video Extend」

    jQuery Video Extendは動画をチャプターごとに区切った…

  3. SVG 3D Tag Cloud jQuery Plugin
  4. preload

    JavaScript

    プリロードやローディング画面を実装できるjQueryプラグイン「preload」

    preloadは、その名のとおり「プリロード」やローディング中の画面を…

  5. JavaScript

    とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

    とってもカッコいいタグクラウドを実装することができるjQueryプラグ…

  6. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

コメント

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

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

最近の記事

  1. 十和田湖
  2. 富有柿
  3. アイリスオーヤマの加湿器
PAGE TOP