How can I add a mobile-friendly, looping banner video to my homepage?

[Natlife]

Hello, I'm trying to add a video on the top of my home page as a banner, it should loop (autoplay) and it can be from my files on Shopify or through a youtube link.

Things I've tried:

I used a banner section and uploaded a gif but it doesn't look right.

I've also used a custom code that I found somewhere and while it worked for pc, it didn't for Mobile.

I tried using the "video" section that comes with the template but it's just not commerce friendly (no autoplay, clickable, and doesn't cover the screen correctly)

All I'm trying to do is add a simple looping video that is mobile-friendly as a banner.

Any help is appreciated thank you!

Website: https://nutrientc.us/

Password: 121212

[OpenThinking · Accepted solution]

Hi there,
Jack from OpenThinking here!

1. From the Shopify admin > Open Settings and then open the Files tab

2. Click the green "Upload files" button

3. Upload your video in .mp4 format

4. Copy the link that was generated for your uploaded file.

 

Then
1. Open the "Theme editor" and  "Add new section"

2. Locate the "Custom liquid" section
3. Copy & paste the following code:

<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline  oncontextmenu="return false;"  preload="auto" id="openthinkingvideo"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4" type="video/mp4"></video><style>#openthinkingvideo { display:block; max-width: 100%; width: 100%; padding: 0; margin: 0 }</style>

4. Replace the URL inside the src="" with the URL of the video you've just uploaded.

5. Save.

 

let me know if this works for you. If yes: accept my answer and give me a thumbs up! Thank you.

[Natlife]

When you say theme editor, do you mean Theme > Edit code > Layout > ??? i dont see theme as a folder for code.

Or do you mean Theme > Edit code > Sections > Create new section (Custom liquid) ? -- Im going to try this theory.

EDIT 1:    I was wrong with my assumptions and what you meant finally clicked. its
From the main pannle, Themes > Customize > Add section > Custom liquid.

and it worked BEAUTIFULLY, thank you!

[kevinvi1]

Worked amazing for me, thak you!
How do i change the height of the looped video? I want to make it thinner so it does not take up the whole page.

thanks! looking forward to your reply

[kevinvi1]

Fantastic! works like a charm.

I also noticed that the play button pops up when you use this liquid on my phone. (not automatically looping).

Also, is there a way to make a looping video but with text box and button? (refer to photo).

webiste link www.aquald.com

Thanks!

[Kennyd1]

would it be possible to add a text to the front and leave the video in the background?

[Ray3ark]

Thank you for the solution!

The video is playing

Is there a way to make it clickable?

Is there a way to make the text overlay or just making it clickable?

Like when people click on the video, it takes the user some where?

[OpenThinking]

Some clarifications about the questions above.

• Many browsers, particularly the most recent versions, automatically block videos from automatically playing, particularly ones with audio.
  
  
• Most mobile devices, including iPhones, iPads, and many Android devices do not support the video autoplay feature so your video will not play automatically if a visitor is on one of these devices.
  
  
• Also, most mobile devices do not support videos playing behind other elements, so when the user taps the play button, the video will "take over" the entire screen.
  
  
• You can place text above the video, but users will not be able to interact with it, so on mobile devices where the video won't autoplay, they will not be able to watch it. The same goes for the link question.

[6da096]

Hello. Thank you so much for this. I have one question - What if we want to add multiple such loop videos. Could you please help with this?

Thank you

[SWS4]

Hi there. It works awesome but how does one unmute do the sound plays? The code says default muted.

much appreciated if there is a fix for this. 

[grumpycookies]

this is an amazing solution!!! super simple too. but i have one question 🙂

is there a way to have this video played on just on the homepage? when i use the code and instructions you provided, the video banner shows up on every page. is there a way to have it ONLY on the homepage? thank youuuu 🙂

erica.

[r3g3n]

I was having the same issue, however the solution i found is a bit complex and does require some tweaking, Solution  Please let me know if you found a different solution that is easier to work with as i am still playing with this and it is not perfect

[topstriker]

Hi,

Is there anyway to change the height of the video? I see an option for width but cant figure out height.

Thanks

[BillyBouly]

Hi,

nothing about your question but just wondering : did you create your website using Dawn theme ? it looks amazing. and loop video is very cool effect.

have a nice day