Shopify themes, liquid, logos, and UX
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
Hello, @vision1_
Thanks for post.
Please share your site URL,
So I will check and provide a solution here.
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?
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.
I am referring to this video, when you scroll down toward the middle of the page:
Thanks for it
can you please try this
https://codepen.io/adrianparr/pen/QxMvdj
@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.
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;}
So when using the code on theme liquid it cuts my video off & how come it won’t auto play on mobile ?
I figured the sizing out but how come it won’t auto play on mobile ?
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.
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?
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
i have check also but it's working fine
this is how it looks on my end
Some device auto play doesn't work
Hello!
Can you help us get this video to autoplay when the site is opened?
Thank you!
Thanks for post
can you please try this code
https://codepen.io/bengoshow/pen/JaOWxq
That works if there is no sound but is it possible to work if the video needs to have sound?
Thanks
can you please try this code
https://codepen.io/wesbos/pen/bqEEEX
thanks for the help, but no, that doesn't work. it is still muted.
we need the sound to be on.
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
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
<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">
With this code the size is respected but won't loop and only autplay on mobile, not desktop.
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>
Hello! Yes, the code works in terms of making the video go on loop and autoplay. However, it also mutes the video.
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?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024