Insert a video in Product page

Solved
Highlighted
New Member
25 0 0

Hi !

I using the debut theme and would like to embed a video (not Youtube, not Vimeo) in the product page. Basically, there should be a thumbnail (as other product images) and when clicking, this should launch the video.
Best,

0 Likes
Highlighted
Shopify Partner
1866 181 748

Hi Muriel, if it isn't Youtube or Vimeo, what is it? How you embed a video depends on its source especially when many of the video hosting / streaming services provide their own embed mechanisms. If you intend to simply upload video the file to Shopify... hmm... not sure, never tried and probably wouldn't recommend.

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
1 Like
Highlighted
New Member
25 0 0

Thanks for the reply. It is a small video showing an object. Well, I could put it on Youtube if easier ;)

0 Likes
Highlighted
Shopify Partner
1866 181 748

Well if it is a small video file up to 10Mb I guess you can upload it to the Assets folder as well. But considering the troubles you'd need to go through to embed that (the Liquid, the HTML5 video player etc etc) I honestly think a quick Youtube upload and embed link is so much quicker, easier and not to forget, Youtube will probably have any of us taken care of better than a cobbled up video player.

 

Just my 2c.

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
1 Like
Highlighted
New Member
25 0 0

OK ;)

And then how to embed it such that it is displayed and clickable in the product thumbnails ?

0 Likes
Highlighted
Shopify Partner
1866 181 748

This is an accepted solution.

You grab the Youtube embed code (from Youtube > Share then that embed icon). That comes as an <iframe /> but you just need the URL from the src attribute. Paste that in to a product image alt description. For a tutorial on above steps see this one here.

 

That takes care of sourcing the video, but since most themes are coded to use lazy loaders you will need some Liquid to distinguish between images that are, well just images and images that are placeholders for videos. We can do that because the alt attribute will contain the string youtube.

 

So opening up your product template look for the section of code where product images are being added. Then wrap it in an if-else as such

 

{% if image.alt contains 'youtube' %}
    <iframe width="600px" height="600px" src="{{image.alt}}?autoplay=1&amp;showinfo=0&amp;controls=0&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen></iframe>
{% else %}
  ...
  ... the image stuff that was there before
{% endif %}

You might have to fiddle around a bit with width and height or whatever else need be adjusted. But that's the gist of it.

 

Best wishes!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
New Member
25 0 0

Thanks !

0 Likes
Highlighted
Tourist
3 0 3

Are you able to please include an example of what the code looks like that is adding the images? Sorry I just can't seem to add it in the correct place or perhaps it just isn't working for my theme?

0 Likes
Highlighted
Shopify Partner
14 0 3

If you want to create a single product page with a demo or promo video then this app can help. https://pluspage.plusapps.dev/tutorials/

It helps adding video in single product page. They have a tutorial here: https://pluspage.plusapps.dev/how-to-create-a-single-product-page-by-pluspage-with-promo-or-product-...

One of the good thing I found with their solution is that they allow to add ay video, not just youtube. They allow vimeo or even Shopify CDN hosted MP4.  

0 Likes
Highlighted
Shopify Partner
64 1 3

hello @KarlOffenberger 

Could you help me understand where to add the code? where is the section of code where product images are added?

 

thanks

 

{% if image.alt contains 'youtube' %}
    <iframe width="600px" height="600px" src="{{image.alt}}?autoplay=1&amp;showinfo=0&amp;controls=0&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen></iframe>
{% else %}
  ...
  ... the image stuff that was there before
{% endif %}

 

0 Likes