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