Solved

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

Natlife
Excursionist
15 0 4

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

Accepted Solution (1)

OpenThinking
Shopify Partner
321 81 120

This is an 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.

Screenshot 2022-02-26 at 14.30.56.png

 

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.

 

 

Screenshot 2022-02-26 at 14.34.04.png



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

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]

View solution in original post

Replies 13 (13)

OpenThinking
Shopify Partner
321 81 120

This is an 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.

Screenshot 2022-02-26 at 14.30.56.png

 

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.

 

 

Screenshot 2022-02-26 at 14.34.04.png



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

️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
Natlife
Excursionist
15 0 4

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
Tourist
11 0 5

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
Tourist
11 0 5

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

Screen Shot 2022-04-02 at 10.34.45 am.png

 

webiste link www.aquald.com

 

Thanks!

Kennyd1
Excursionist
30 2 8

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

Ray3ark
Tourist
5 0 1

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
Shopify Partner
321 81 120

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.
️ Get our [Shopify Themes]: Lightning-fast, eye-catching, highly converting, SEO-optimised, Minimal.
Struggling with CODE? You need a Shopify expert to help you with your theme! [Get a free quote]
6da096
Visitor
1 0 0

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
Visitor
2 0 0

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
Tourist
3 0 3

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
Visitor
1 0 0

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

Hi,

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

Thanks

BillyBouly
Visitor
1 0 0

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