埋め込み動画をレスポンシブ対応にしてくれるjQueryプラグイン「FitVids.js」

埋め込み動画をレスポンシブ対応にしてくれるjQueryプラグイン「FitVids.js」

埋め込み動画をレスポンシブ対応にしてくれるjQueryプラグイン「FitVids.js」

FitVids.jsは、簡単な記述を追加するだけで、YouTubeなどの埋め込み動画をレスポンシブに対応させてくれるjQueryプラグインです。

CSSを使ってレスポンシブにする方法は以前紹介しましたが、今回はjQueryを使った方法です。

ステップ1. FitVids.jsをダウンロードしてサイトに設置する

まずは、GitHubからFitVids.jsをダウンロードしましょう。使うファイルは、jquery.fitvids.jsだけです。

jquery.fitvids.jsをダウンロードしたら、サーバーの適当な場所にアップロードします。

ステップ2. FitVids.jsの呼び出し

jquery.fitvids.jsを設置したら、以下の記述を追加して、jQueryとFitVids.jsを呼び出します。コードを追加する場所は、</body>の直前で大丈夫です。


<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$("#fitvids").fitVids();
});
</script>

jQueryは、ダウンロードしてサーバーに設置してもOKです。jQueryとFitVids.jsのパスについては、ファイルを設置した場所に適宜変更してください。

5行目で指定しているID「$(“#fitvids”)」は変更可なので、自分が使いやすいIDに変更してください。ここでは、埋め込み動画を内包する要素のIDを指定しています。

ステップ3. 埋め込み動画の設置

以下のように、埋め込みコードをdiv要素で内包してあげます。この時、ステップ2で指定したIDをdivに付与してあげます。


<div id="fitvids">
<iframe width="560" height="315" src="//www.youtube.com/embed/BSz7I3l7gMI" frameborder="0" allowfullscreen></iframe>
</div>

このように、IDで内包してあげるだけで、埋め込み動画がレスポンシブに対応します。

あとがき

CSSで調整する方法と同様に、簡単にレスポンシブ対応させることができますね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です