Autoplay in a self-hosted video

[vision1_]

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

[KetanKumar]

Hello, @vision1_ 

Thanks for post.

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

[able36]

@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?

[KetanKumar]

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.

[able36]

@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:

[KetanKumar]

@able36 

Thanks for it 

can you please try this 

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

[able36]

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

[KetanKumar]

@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;}

[Amvilles24k]

So when using the code on theme liquid it cuts my video off & how come it won’t auto play on mobile ?  

[Amvilles24k]

I figured the sizing out but how come it won’t auto play on mobile ?

[KetanKumar]

@Amvilles24k 

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.

[Amvilles24k]

Www.the7thscheme.com 

password: yiathe 

[KetanKumar]

@Amvilles24k 

Thanks for it 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

[Amvilles24k]

I am using safari and on a iPhone 7. It works but on my end you have to press the play button for it to play. It doesn’t unto play until you press play and then it loops 

[KetanKumar]

@Amvilles24k 

i have check also but it's working fine

[Amvilles24k]

 this is how it looks on my end 

[KetanKumar]

@Amvilles24k 

Some device auto play doesn't work 

[Ninja1]

Hello!

Can you help us get this video to autoplay when the site is opened?

https://www.theslapmask.com/

Thank you!

[KetanKumar]

@Ninja1 

Thanks for post 

can you please try this code

https://codepen.io/bengoshow/pen/JaOWxq

[ninja2]

That works if there is no sound but is it possible to work if the video needs to have sound?

[KetanKumar]

@ninja2 

Thanks 

can you please try this code

https://codepen.io/wesbos/pen/bqEEEX

[ninja2]

thanks for the help, but no, that doesn't work. it is still muted. 

we need the sound to be on. 

[KetanKumar]

@ninja2 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

[Djalil]

Hi

I just tried this code and works  perfect  on Desktop, but  on Mobile the video disappear,

Well actually, there is  a size issue, the video gets too big.

just blank space.

Help please

[Djalil]

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='
frameborder='0' allowfullscreen></iframe></div><div class="video-wrapper">

[Djalil]

With this  code the size is respected but won't  loop and only autplay on mobile, not desktop.

[Djalil]

@KetanKumar

[Denis_A]

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>

[vision1_]

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

[hlyarndt]

Hi – so happy I found this code! It works perfectly except I'd like to take the controls completely off. No play, pause, expand - none of those buttons even when you hover over the video. Could you please advise how to make that work with the code you listed?