Autoplay in a self-hosted video

Highlighted
Tourist
6 0 3

Hi, so I have been using the theme Brooklyn, and I added a video through the custom HTML option. I want to make this video autoplay (as soon as the blog is opened), on loop, and not muted. I have tried searching the codes necessary for this, but nothing seems to work. So far, this is what I've written for the HTML:

<video controls="controls" style="max-width: 100%; height: auto;" autoplay="autoplay" loop="loop">
<source src="https://cdn.shopify.com/s/files/1/0377/3215/5527/files/THE_SPEAKER.mp4?v=1587820546" type="video/mp4">
</video>

The video works the way I wanted in the editor, but not when I opened the blog. Are there any solutions?

Thank you

Highlighted
Shopify Partner
9274 1180 3266

Hello, @vision1_ 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Shopify Partner
273 39 44

Hi @vision1_ 

Try to use this code

<video style="max-width: 100%; height: auto;" controls muted playsinline autoplay loop>
<source src="https://cdn.shopify.com/s/files/1/0377/3215/5527/files/THE_SPEAKER.mp4?v=1587820546" type="video/mp4">
</video>
Get help with your Shopify store that you are looking for.
Shoot me an email: denis@thewebave.com
https://thewebave.com/
Highlighted
Tourist
6 0 3

Hello! Yes, the code works in terms of making the video go on loop and autoplay. However, it also mutes the video.

0 Likes
Highlighted
Tourist
9 0 4

@KetanKumar 

When using this code, the video player controls appear when you hover over the video.

How can I use this so there are no video controls that appear, even if I hover over the video?

Highlighted
Shopify Partner
9274 1180 3266

Hello, @able36 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Tourist
9 0 4

@KetanKumar 

https://turismoracing.com/a/gempages?preview=1606025374&type=template-product&product=stanza-gaming-...

I am referring to this video, when you scroll down toward the middle of the page:

able36_0-1606066399681.png

 

Highlighted
Shopify Partner
9274 1180 3266

@able36 

Thanks for it 

can you please try this 

https://codepen.io/adrianparr/pen/QxMvdj

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Tourist
9 0 4

@KetanKumar thanks for your help.

But the videowrapper tag causes the row to get much taller and it messed up the alignment.  Please check the URL again to see what I mean.

Highlighted
Shopify Partner
9274 1180 3266

@able36 

Thanks for create 

yes, please add this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.video-wrapper {padding-bottom: 0;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing