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>

[bridalboxco]

Thanks for getting back to me! I don't suppose you know how to get the
video to play on browsers? It plays on my editor, but won't when I load in
a different browser or on my phone.

My website is www.bridalboxcompany.co.uk

[LincolnB]

Hi so I have used this code to imbed a video in shogun, but I want to know how to make it responsive to any screen size. 

[aceduck]

If the cdn link is from an outer source, will it work?

[oldsalt]

Is it possible to make these videos responsive?

[AndrewWalters]

It depends on the app. What are you using to embed them?

If you're pasting HTML with a <video> "tag", you might see something like <video src="myvideo.mp4" autoplay ...> You can just delete the autoplay part.

But other sites that have embed codes have their own way of changing the setting.

[AndrewWalters]

Hey aceduck,

Yeah, usually you can embed from another CDN. Just take the original <video> example, but change the src to the full URL (including https://).

You can experiment with it on a new page, that way if it doesn't work, you can paste the URL here and someone can help you 🙂

[AndrewWalters]

Hey LincolnB, if you have a sample page link, it would help a lot!

Sometimes, you can make it responsive by simply adding style="max-width: 100%" inside of the video tag but it could depend a lot on your site, etc.

It might look something like:
<video ...bunch of settings... style="max-width: 100%">

...
</video>

[oldsalt]

Thank you! That worked like a charm!

---

@AndrewWalters wrote:

Hey LincolnB, if you have a sample page link, it would help a lot!

Sometimes, you can make it responsive by simply adding style="max-width: 100%" inside of the video tag but it could depend a lot on your site, etc.

It might look something like:
<video ...bunch of settings... style="max-width: 100%">

...
</video>

---

[AndrewWalters]

Wow, awesome, and good job! I was sure it'd take more back and forth to get it setup smoothly 🙂 Glad I could help!

[Vikstrong]

Is there a way to remove the "download" option?