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

October 26, 2020

There are times when you want to embed a video on your Shopify site.

But you have to actually embed the video, make it responsive, and keep the video ratio. It's a lot of work.

But with FitVids.js, you can easily create responsive embedded videos! How convenient☺️.

The DEMO page is here
http://fitvidsjs.com/
(
make the
window smaller or larger accordingly)

Many places are embedding Youtube videos into their Shopify sites these days, and it's easier to convey the appeal of a product if there's a video as well as a detailed product image! I have the impression that many of our clients are thinking about this. In such cases, it would be great to have a plugin like this to save time during development.

Download FitVids.js

First, go to the following URL of FitVids and copy the file "jquery.fitvids.js".

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

This is the only file you will actually use.

Admin screen → Theme list → Code edit → Assets folder

Create a new file in the

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

Name the file "jquery.fitvids.js".

Then, open the FitVids file you created and copy and paste the code from earlier.

Shopify FitVids

It should look something like this.

Now you are ready to use FitVids!

Embed and use in the relevant file

Next, embed FitVids in the file you wish to use and include the jQuery code. Remember to embed the jQuery beforehand.

Then, add the

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

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

The following is a description of the following.

What we are embedding this time is the same story of Humbert Humbert that I have been into lately.

What we are doing is putting the iframe tag of the video we want to embed inside a div and applying fitvids.js to the class and id names of that div.

This completes the video embedding for responsive design.

Embedding videos in your Shopify site responsive with FitVids.js Conclusion

This was a simple but effective way to embed videos and make them responsive.

I want to introduce my products on YouTube and other video services in the future! I believe that the demand for this service will continue to grow. Recently, there are rumors that you will be able to make purchases directly from YouTube videos using Shopify.

FitVids is responsive with just a few lines of code, so please take advantage of it.

Have a great day!