Embedding Videos with HTML Code

[Wally_Iwanciw]

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.

[Savannah_F]

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

[bnoof]

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?

[frankburder]

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?

[kenkinneen]

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.

[frank29]

That worked perfectly!! Thank you!!

[kenkinneen]

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

[frank29]

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

[bridalboxco]

Hi Savannah,

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

Thanks,

Lamide

[kenkinneen]

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>