FROM CACHE - en_header

Dawn 3.0 Add a looping banner video

Solved
Natlife
Excursionist
14 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)

Accepted Solutions
OpenThinking
Shopify Partner
317 78 113

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 7 (7)
OpenThinking
Shopify Partner
317 78 113

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
14 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
10 0 4

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
10 0 4

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 7

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

Ray3ark
Tourist
5 0 0

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
317 78 113

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]