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で調整する方法と同様に、簡単にレスポンシブ対応させることができますね。