[Shopify] FitVids.jsで埋め込み動画をレスポンシブ対応する

2020年10月26日

Shopifyサイトに動画を埋め込みたい時ってありますよね。

でも実際埋め込んでレスポンシブ化対応して、動画の比率も保ったままにして。って考えると意外と手間なのです。

しかし、今回紹介するFitVids.jsを使用すると簡単にレスポンシブ対応された埋め込み動画を作成することができます！なんと便利な☺️

DEMOページはこちら
http://fitvidsjs.com/
（ウィンドウを小さくしたり、大きくしたりすると、それに応じて）

最近はYoutubeの動画をShopifyサイトに埋め込んでいる所も多く、商品詳細画像だけでなく、動画もあった方が魅力を伝えやすい！と考えているクライアントさんも多い印象です。そんな時に、こういったプラグインを覚えておくと開発の際に時間短縮できるのでありがたいですね。

FitVids.jsをダウンロードする

まず下記FitVidsのURLにいき、「jquery.fitvids.js」というファイルをコピーしましょう。

実際使用するファイルはこちらのみですので、

管理画面→テーマ一覧→コード編集→Assetsフォルダ

の中に、新規ファイルを作成します。

Shopify FitVids js プラグイン追加　管理画面

ファイル名は「jquery.fitvids.js」にしましょう。

そして、作成したFitVidsファイルを開き、先ほどのコードをコピペします。

Shopify FitVids

こんな感じになりますね。

これでFitVidsを使用する準備ができました！

次に使用したいファイルにFitVidsを埋め込み、jQueryコードを記載していきます。事前にjQueryを埋め込んでおくことを忘れずに。

そして、

{{ 'jquery.fitvids.js' | asset_url | script_tag}}

<script>
$(function(){
$("#fitvids-shopify").fitVids();
});
</script>

を記載します。

今回埋め込むのは、最近ハマっているHumbert Humbertの同じ話です。

やっていることとしては、埋め込みたい動画のiframeタグをdivの中に入れて、そのdivのクラス名やid名にfitvids.jsを適用するという感じです。

これでレスポンシブデザインの動画埋め込みが完了しました。

以上、簡単ではありましたが動画を埋め込みレスポンシブ化する方法でした。

今後もYouTubeをはじめとした動画サービスで商品を紹介したい！という需要は伸びてくると思っています。最近YouTubeの動画内から直接Shopifyを利用して購入できる仕様になるとも噂されていますしね。

なので、動画の比率に合わせて毎回動画を組み込んでいくと疲れちゃいます。FitVidsは数行のコードでレスポンシブ対応できるのでぜひ活用してみてください。

それでは本日も良い1日を！