How to use HTML to add videos

[christadorned]

Trying to add a video to my site without having to use youtube. I want it to be something that will load/play automatically as a customer scrolls through the website. Is there anything I can do to add that to my site? I'm using the minimal theme

[Dirk]

Hey, @christadorned 

Thanks for reaching out today. That's a great question. If you want to include a video on your homepage, you can embed a video by adding some code into a 'Custom HTML' section in your theme editor. I actually created a screen recording, here that outlines how you can accomplish this. You can acquire the necessary code from this thread. 

1) Upload the video into your Files section of your Shopify store. (Click "Settings" > Click "Files"). Make sure the video file is either a .MP4 or .WEBM.

2) Copy/Paste the code listed in the thread above into a 'Custom HTML' section. Paste the URL of the video in your files section into the code as shown in my screen recording. Be sure to delete the .WEBM code if you are using an .MP4 and vice-versa for .WEBM.

3) Upon saving the video should show up. This code is set so the video will autoplay and be muted by default. If you want sound on by default you can remove

 muted=""

 from the code.

Let me know if that helps!

[christadorned]

Thank you so much! This worked. 

However, the video is HUGE. Is there any way I can edit the code to make the video smaller? And how about editing it to be centered on the page?

[christadorned]

Bump! Does anyone know how to resize the video? I am able to put the video in with the HTML code but it's HUGE. 

[VegasRome]

@christadorned 

did you ever figure out how to resize the video? if so could you post it here please

[Vignesh96]

Hey @VegasRome @christadorned ,

To resize a video using HTML code you can set a max height or width of the video. This is the syntax for doing that:

<video width="320" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

You can read more here:  https://www.w3schools.com/tags/att_video_height.asp

If the problem is with the video being very big file (Storage wise) or you want to crop the video you can use one of the online video editors like Clideo
- https://clideo.com/crop-video
- https://clideo.com/compress-video

Hope this helps :) Wish you all the best!

Cheers,
Vignesh
ModeMagic

[VegasRome]

Many thanks!

[Jsonting]

Hi guys,

i added the video successfully using the video from my Files.

However it wont autoplay in mobile browser.

I noticed there was some rules saying autoplay don't work under mobile environment.

But is there any workaround for this?

[Veo]

Hi,

I also have this issue on my website www.store-veo.com

I have right now embedded the standard shopify youtube section but I have so many problems with it -> not compatible with mobile and long loading times..

Can you please help me out? Since I have the Narrative Warm Theme I somehow also cannot add custom HTML sections.

Kind Regards

Julian

[GuitarVilla]

This was very helpful and I was able our store tour video to our about page, unmuted it, but it is left-aligned, despite the full page width box being checked. Any suggestions for editing the code to center the video? 

Thank you.