Embedding Videos with HTML Code

New Member
1 0 0

Hey just wondering how can you embed videos in HTML code? Now I know that you can embed videos using Youtube but since YouTube provides recommended videos at the end, it feels distracting and removes the customer from looking through the product. Please respond as soon as you can with step by step instructions.

 

0 Likes
Shopify Staff
Shopify Staff
537 0 69

Hey, Wally!

Savannah here from the Shopify Guru Team. :) 

Absolutely! You can use a code like this one to embed another video. Simply upload your video to the settings>files area of your admin and replace the link.mp4 bit with your own CDN link. 

Let me know if that makes sense!

<video width="320" height="240" controls="controls">
  <source src="link.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

Savannah | Shopify Guru
support@shopify.com

3 Likes
New Member
2 0 0

I have a whole page with 12 videos I want users to choose from. But when I add embed codes, they are autoplaying. How do I turn off autoplay?

0 Likes
New Member
1 0 0

Hi! I'm using this embed code for self-hosted videos and it works great! Only question I have - is there a way to add a thumbnail so it's not just a blank rectangle until the user clicks the video?

0 Likes
Shopify Partner
36 7 34

Hi, 

Yes you can. 

 

Using the poster attribute like I have below in your opening video tag you can pick a thumbnail for your video.

 

<video class="video-player hidden" id="5"  autoplay="autoplay" controls preload="auto" width="640"  height="264"
          poster="//cdn.shopify.com/s/files/1/0201/3347/8500/t/4/assets/ytthumb.jpg?13431113366972767101" data-setup="{}">

Just replace the piece inside the quotes after "poster" with the link to your thumbnail.

 

 

Personal Shopify Development for $40 an hour. Contact me by private message or by email at info@kenkinneen.com
2 Likes
Shopify Partner
3 0 0

That worked perfectly!! Thank you!!

0 Likes
Highlighted
Shopify Partner
36 7 34

 Could you please mark my answer as the correct solution please? Thank you.

Personal Shopify Development for $40 an hour. Contact me by private message or by email at info@kenkinneen.com
2 Likes
Shopify Partner
3 0 0

It's letting me do that for some reason...

0 Likes
New Member
2 0 0

Hi Savannah,

 

Is there a way to remove the controls from the video once it has been uploaded?

 

Thanks,

Lamide

0 Likes
Shopify Partner
36 7 34

Hi Lamide, 

 

Just leave out the controls tag from the code. So it would look something like this if you were working from Savannah's code.

 

<video width="320" height="240">  <source src="link.mp4" type="video/mp4" />  <source src="movie.ogg" type="video/ogg" />Your browser does not support the video tag.</video>

  

Personal Shopify Development for $40 an hour. Contact me by private message or by email at info@kenkinneen.com
1 Like