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>の直前で大丈夫です。
1 2 3 4 5 6 7 | <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に付与してあげます。
1 2 3 | < div id = "fitvids" > < iframe width = "560" height = "315" src = "//www.youtube.com/embed/BSz7I3l7gMI" frameborder = "0" allowfullscreen></ iframe > </ div > |
このように、IDで内包してあげるだけで、埋め込み動画がレスポンシブに対応します。
あとがき
CSSで調整する方法と同様に、簡単にレスポンシブ対応させることができますね。