Autoplay on video banner

Store Design
, , , , , , , ,
1

Hi,

Im currently using impulse theme Where Ive got a video banner, but i wondered if there is anyway to make autoplay? So it doesnt consist of a play button etc. Appreciate it alot if someone is able to help me take a look at this :grinning_face_with_smiling_eyes:

my url is: arstrata.shop

2

Hi @kristrata ,
I have gone through the URL, but I didn’t find any banner video.
Thanks :slightly_smiling_face:

3

IMG_3773.jpeg
IMG_3773.jpeg828×1792 164 KB

It should be this one:

4

Hi @kristrata ,

To make the video banner autoplay without showing the play button in the Impulse theme

Here’s how you can do it:

Follow these steps:

Go to Online Store > Themes > Actions > Edit Code.

  • Look for the section that controls the video banner. This is usually found in a section like video-banner.liquid under the sections folder.
  • Edit the
  • autoplay: Starts the video as soon as it’s ready.
  • muted: Ensures the video is muted, as most browsers block autoplay videos with sound.
  • loop: Repeats the video indefinitely.
  • playsinline: Ensures the video plays inline on mobile devices instead of opening fullscreen.
5

Hi @kristrata ,

To enable autoplay for your video banner in the Impulse theme on Shopify, you can try the following steps:

  1. Go to your Shopify Admin and navigate to Online Store > Themes.

  2. Click on Actions and select Edit code.

  3. Locate the section where your video banner code is, usually in a file like banner-video.liquid or a similar file.

  4. Look for the

Note: The muted attribute is necessary for autoplay to work in most browsers.

  1. Save the changes and refresh your site to see if it works.

If this doesn’t solve the issue or you’re unable to locate the file, please feel free to share your code snippet here, and I’ll be happy to take a look!

I hope this helps! :grinning_face_with_smiling_eyes:

6

thanks might be a stupid question but do i have to change anything in {your_url_video} part? Or can i just copy pastor the whole thing?

7

Thanks for the answer appreciate it! do i have to change anything in {your_url_video} part? Or can i just copy pastor the whole thing?

8

@kristrata ,
only you need to add this
autoplay muted attribute to video tag,
like :

9

Thanks i will check and see if i can find the code section for it

10

Tried to change the code but couldnt find the sections where i need to do the changes ive got these options:

kristrata_0-1728376831862.png
kristrata_0-1728376831862.png379×439 18.3 KB

11

Do you know which of these options where i need to change the code?

kristrata_1-1728376965531.png
kristrata_1-1728376965531.png379×439 18.3 KB

12

Look for the Video Banner Section:

  • In the Sections folder, look for a section that controls the video banner. The name could vary, but likely files to check include:
    • video-banner.liquid
    • banner.liquid
    • hero-video.liquid
13

You don’t need to change it if it’s working. You can simply copy and paste the entire code without modifying {your_url_video} or {{video_url}}.

14

Yes Ive got hero-video.liquid but i dont know exactly Where inside that section i need to change the code :sweat_smile:

15

Hi @kristrata ,

Follow these steps:

  1. Open the hero-video.liquid file in the code editor.

  2. Look for the

It could also be within a conditional statement or wrapped in a div.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

16

Yes Ive got hero-video.liquid but i dont know exactly Where inside that section i need to change the code

17

tried to go through it now but cant really find something that looks similar to what youre describing

18

Could you please share access to your store? That way, I can make the necessary changes and ensure everything is corrected properly.

19

Yes i have sent you a message now