Shopifyの無料体験をはじめる

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

 Shopify FitVids レスポンシブ化

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

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

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

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

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

 

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

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

https://github.com/davatron5000/FitVids.js/blob/master/jquery.fitvids.js

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

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

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

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

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

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

Shopify FitVids

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

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

 

該当のファイル内で埋め込み、使用する

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

そして、

<div id="fitvids-shopify">
<iframe width="560" height="315" src="https://www.youtube.com/embed/1-aD6iPdmKg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

 

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

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

を記載します。

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

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

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

 

Shopifyサイト内に埋め込む動画をFitVids.jsでレスポンシブ対応する まとめ 

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

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

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

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

フルリモートワーク専門求人
ReWorksで場所に縛られずフルリモートで働ける環境を.
未経験エンジニア転職
未経験だけどエンジニアになりたい人はウズキャリ.
お金をください!笑
スカウトされる自信があれば転職ドラフトで勝負.
週3勤務でストレスレス
もう週5勤務に戻れないかも。それでも良ければテックゲート.

コメントを残す

コメントは表示される前に承認される必要があります。