簡単にYouTube等の動画をレスポンシブル対応に変えるjQueryプラグイン「FitVids.JS」

サイトをレスポンシブルに改造していたら、動画が画面からはみ出した・・・！

そんな時に簡単に動画をレスポンシブル対応に変えてくれる魔法の様なアイテムを紹介します。

それがjQueryプラグインの「FitVids.JS」です。

今回はこちらを使った動画のレスポンシブル対応を解説します。

1　プラグインをダウンロード

http://fitvidsjs.com/のDOWNLOADからGitHubへ

GitHubへ進んだら、右下のDownload ZIPを押してダウンロードします。解凍が面倒な方は、「jquery.fitvids.js」クリックしてソースコードをコピーしてください。

解凍後、「jquery.fitvids.js」をサーバの適当な場所にアップします。

2　使用方法

jQueryとプラグインを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.fitvids.js"></script>

当たり前のことなのですが一応。
jQuery本体より後に、プラグインの読み込みの記述、です！

・任意のID、クラスを指定

ｊQuery、プラグインの読み込みの記述が終わったら、下記のコードを追加します。

<script>

$(function(){

　　　　$("任意のID、クラス").fitVids();

});

</script>

・動画のソースを、指定したID、クラスで「div」で囲む

<div id="任意のID、クラス">

動画のソース
</div>

動画のソースはYouTubeだと、動画下の方で生成できる埋め込みコードです↓

たったこれだけで動画が簡単にレスポンシブルに対応できます。

YouTube、Vimeo、Blip.tv等々主要な動画サイトに対応しているのも魅力的です！



最後に、WordPressで動画をレスポンシブルに対応する際は、下記のようなプラグインもあるようです。使ったことはないですが、Ustream、Dailymotionに対応しているのがイイですね♪

決定版! YouTubeやVimeo動画のレスポンシブ対応化プラグイン

3　関連リンク

[Å] YouTubeやVimeoなど固定サイズになった外部の動画をレスポンシブに対応させる方法

Youtubeなどの動画コンテンツをスマートフォンの横幅に合わせてくれるjQuery「FitVids.js」の搭載手順