「ジャパネットたかた」や「サンワサプライ」などで活用されている商品紹介動画。YouTubeなどの外部サービスを組み込む場合、そのままでは指定したサイズで表示されてしまい、画面サイズの小さい端末などでは切れてしまいます。
以前の記事ではYouTube動画をウェブサイトに埋め込む方法をご紹介しましたが、今回はその動画をレスポンシブに対応させる方法をご紹介します。
FitVid.jsを使って動画をレスポンシブ化
今回はjQueryのプラグインとして動作する「FitVid.js」( http://fitvidsjs.com/ )使ってレスポンシブ化を行います。
あらかじめ動画の埋め込みを行い、動画を内包するボックスに任意のidやclassを指定しておいてください。(今回の例ではvidを使います)
1、JavaScriptをダウンロード
まずGitHubへアクセスをし、JavaScriptファイルをダウンロードします。
「jquery.fitvid.js」がそのファイルになるので、任意の場所に保存しましょう。
※このライブラリにはjQueryが必須になります。
JavaScriptの読み込みは</body>の直前に配置すれば問題ありません。
<script src="js/jquery.min.js"></script> <script src="js/jquery.fitvids.js"></script> <script> $(document).ready(function(){ $("任意のidやclass").fitvids(); }); </script>
jQuery、FitVids.jsの順に読み込みます。
2,YouTube動画を埋め込む
購入率を3割上げる!スマートフォンECの動画活用事例を参考にコードを取得し動画を埋め込み、任意のidやclassを指定します。
<section> <div id="vid"> <iframe width="560" height="315" src="http://www.youtube.com/embed/VR5HFJb4HJM" frameborder="0" allowfullscreen></iframe> </div> (中略) <script src="js/jquery.min.js"></script> <script src="js/jquery.fitvids.js"></script> <script> $(document).ready(function(){ $("#vid").fitVids(); }); </script>
YouTubeの埋め込みコード(iframe)のソースはそのまま使用することができます。
またYouTubeの他にもVimeoなどの動画共有サイトの埋め込みコードもそのまま使えるので、是非お試し下さい。