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

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

  2. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

  3. makefixed.js

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

  4. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

  5. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  6. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

コメント

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

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

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP