How can I set a video to autoplay on my homepage in the Dawn theme

How can I set a video to autoplay on my homepage in the Dawn theme

HAllen
New Member
4 0 0

On my homepage I would like the top banner to be a video which auto plays when the page loads. Removing the controls and play button. The video file has no sound. 

 

I understand you need to change the code for this. 

Could anyone provide me with a step-by-step and the code to do this (I haven't updated code before) 

Replies 8 (8)

AnneLuo
Shopify Partner
902 167 191

Hi, @HAllen 

Which version are you using?

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

HAllen
New Member
4 0 0

Hi AnneLuo,

I'm using 11.0.0

BSSCommerce-B2B
Shopify Partner
1282 334 398

Hi @HAllen

I haved checked your requirement. 

If you want auto plays video banner when the page loads, you  need to add the 'autoplay' attribute to the video tag to automatically play the video and the 'loop' attribute to make it repeat after it ends (if you want). 

You can reference this thread to do that: 

https://community.shopify.com/c/shopify-design/refresh-theme-video-on-my-slider/m-p/2604720/highligh...

 

Hope it helps,

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day my friend! 

 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


BSS: B2B Wholesale Solution |BSS: B2B Portal, Quote, Net 30 | B: B2B Lock Password Protect


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
HAllen
New Member
4 0 0

Hi @BSSCommerce-B2B 

Thank you - this works, but wondering is there a way to not have the video time and controls visible at the bottom? 

It looks worse on mobile.

Thanks for your help!

BSSCommerce-B2B
Shopify Partner
1282 334 398

Hi @HAllen , 

To hide the video time and controls at the bottom of the video in a Shopify store banner, you can remove the "controls" attribute from the <video> tag. Here's the example code:

<video autoplay muted loop width="100%" height="auto">
    <source src="this is link of your video" type="video/mp4">
</video>

By removing the "controls" attribute, the video controls, including the time display, won't be visible, allowing the video to play without any on-screen controls.

 

You can try this out...

 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Good luck, my friend! 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


BSS: B2B Wholesale Solution |BSS: B2B Portal, Quote, Net 30 | B: B2B Lock Password Protect


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
HAllen
New Member
4 0 0

Hi @BSSCommerce-B2B 

Thank you - that works showing up in the editor and on desktop version but in mobile view now not playing at all just a static image.... hmmm 

namphan
Shopify Partner
1051 129 165

Hi @HAllen,

Please refer to the following guide, it will help you add section and work well

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com

namphan
Shopify Partner
1051 129 165

Hi @HAllen,

Please go to Customize > Add section > Video:

Screenshot.png

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com