Embedding Videos with HTML Code

Wally_Iwanciw
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.

 

Replies 32 (32)
Savannah_F
Shopify Staff
Shopify Staff
540 1 106

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

Savannah | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

bnoof
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?

frankburder
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?

kenkinneen
Shopify Partner
41 7 49

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.

 

 

Mercury Apps - Human Focused Shopify Apps.
Increase conversion rate with : https://apps.shopify.com/order-delivery-deadline
frank29
Shopify Partner
3 0 0

That worked perfectly!! Thank you!!

kenkinneen
Shopify Partner
41 7 49

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

Mercury Apps - Human Focused Shopify Apps.
Increase conversion rate with : https://apps.shopify.com/order-delivery-deadline
frank29
Shopify Partner
3 0 0

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

bridalboxco
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

kenkinneen
Shopify Partner
41 7 49

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>

  

Mercury Apps - Human Focused Shopify Apps.
Increase conversion rate with : https://apps.shopify.com/order-delivery-deadline
bridalboxco
New Member
2 0 0
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
New Member
1 0 0

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
New Member
11 0 0

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

oldsalt
New Member
2 0 1

Is it possible to make these videos responsive?

AndrewWalters
Shopify Partner
55 6 19

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.

Want to increase conversions or get more social media attention? Try Brisa Video Creator to quickly and easily create videos that engage your viewers!
AndrewWalters
Shopify Partner
55 6 19

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 🙂

Want to increase conversions or get more social media attention? Try Brisa Video Creator to quickly and easily create videos that engage your viewers!
AndrewWalters
Shopify Partner
55 6 19

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>

Want to increase conversions or get more social media attention? Try Brisa Video Creator to quickly and easily create videos that engage your viewers!
oldsalt
New Member
2 0 1

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
Shopify Partner
55 6 19

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

Want to increase conversions or get more social media attention? Try Brisa Video Creator to quickly and easily create videos that engage your viewers!
Vikstrong
New Member
1 0 0

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