DAWN theme - Auto Play videos on homepage

SimbaLyonOXF
Visitor
2 0 0

This seems to be a subject that does not have a straight answer, i wish to AUTOPLAY my homepage video, but i dont want it linking/url to youtube or vimeo, i have downloaded it and uploaded it to my page.

 

no amount of custom code i can write seems to work, i am not an expert, just using google to try and find the solution.

 

any help would be appreciated, The link to website is www.uniquelaps.co.uk 

Replies 6 (6)

PaulNewton
Shopify Partner
6275 574 1324

@SimbaLyonOXF wrote:

This seems to be a subject that does not have a straight answer, i wish to AUTOPLAY


Because the straight answer isn't self serving: most internet users wish you wont autoplay.

Consumers wish you wont so much so that browser makers have had to actively put systems in place to kill these annoyances.

https://developer.chrome.com/blog/autoplay/ 

If you don't have ab-testing you shouldn't even bother with autoplaying video.

 

Instead if must try and create sentiment use a much simplified gif with optimized file size (~1MB), and link to an about us page or something, or better just use a static hero image.

 

But that straight answer doesn't placate egos or generate sales for coding solutions you don't need for a problem you shouldn't try and force on those that didn't ask for it.

It's right up there with above the fold slideshows in bad side effects from bad prescriptions.

 

If you must push forward video w/ audio autoplay using the below information at minimum you should only do so if you have a/b testing in place to validate assumptions with real customer data.

 

Meaning if you don't know what ab testing is or have such a system in place that is an indicator you shouldn't force autoplay.

 

How many actual customers have asked for autoplaying grainy video with loud elevator music they aren't going to watch but will use up bandwidth and slow down the page load.

If you misuse this on the frontpage then deeper in the site where this actual relevant video content is that will get the negative side effect of not autoplaying because you tanked the  Media Engagement Index . I.e. customers disable the frontpage vid every time it loads, so browser sets your site to a low engagement index crippling actual important videos.

 

Autoplay code customizations

https://developer.chrome.com/blog/autoplay/ 

When customizing the code make sure the video either has no audio or the video element has the muted attribute as your likely not meeting the  Media Engagement Index .

This also means when testing autoplay with audio you should do so using the chrome development switches or a completely different browser because you yourself may have behaved in ways that make your browser to not autoplay your own videos on your own website.

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#:~:text=of%20the%20video.-,muted,-A%... 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


miguel-angel
Shopify Partner
30 3 4

I checked your page,
The video isn't even added to the page until you click the play thumbnail.

I suggest a custom video section, not the dawn one

Like & set Accepted Solution if I helped | Donate

.

Miguel Ángel

.

Freelance Shopify Developer
Reach out if you need any Custom Features in your site.

fadi_yousif
Shopify Partner
342 43 65

You can use a <video> element with the autoplay attribute to achieve this. That's how I've done it.

PageFly-Henry
Astronaut
984 281 225

Hi @SimbaLyonOXF 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag </body> -> save.

PageFlyHenry_0-1696823295158.png

 

 

<script>

document.addEventListener("DOMContentLoaded", function() {video.setAttribute("muted", "true");

    var video = document.querySelector("video");

  video.autoplay = true;

  video.setAttribute("muted", "true");

});

</script>

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

topnewyork
Trailblazer
253 26 35

Try implementing this video tutorial, I found it by just Googling "Shopify Autoplay Video". Super simple and you just need to copy and paste the instructions

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel
ArturoVial
Visitor
1 0 0

I insert the code but it is not centered and the other thing is that it is not responsive to see it on the cell phone, it is too big.
Can you help me with that?