Autoplay video not playing on low power mode

Hi there everyone, so I’ve been getting problems with adding an autoplay background video onto my site. I’m aware that this occurs on safari and on low power mode; however not having autoplay is resulting in a play button on the screen. is there any custom code I can add to fix this???

link to preview of the site:

https://preview.webflow.com/preview/the-lab-ac46a7?utm_medium=preview_link&utm_source=designer&utm_content=the-lab-ac46a7&preview=5ebdbdb32e3085746ffbb8f73605dfc5&pageId=62fe7d8e6aaa3b6910cb4db5&workflow=preview

Thanks Ope Aderin.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

This is 100% normal behavior especially in Safari. There isn’t a way around it as far as I know — background/video uses a lot of power so low power disables it

Hi Ope,

I solved this a while ago by writing the script below, but I haven’t tested it recently.

In Low Power Mode, Safari needs a user to interact with the video in order to start. If the script still works, it’ll essentially turn your entire page into a trigger. So the moment someone interacts with it (e.g. scrolls down), the video starts playing. Of course it works best when your video isn’t placed directly at the top of your page or you’ll still see the play button for a few moments.

It’s important that you give your video elements the additional class name: inlinevideo
Then place the script in the “Before </ body> tag” section of your page or website.

<script>
					//PLAYS VIDEO IN LOW POWER MODE
$('body').on('click touchstart', function ()  {var videoElement = document.getElementsByClassName('inlinevideo');if (videoElement.playing) {} else {$('.inlinevideo').trigger('play');}});

</script>

Of course as @austin pointed out, it’s expected behavior for the videos not to autoplay in Low Power Mode, so you might wanna think twice before implementing it. People might find it annoying. :slight_smile:

1 Like

Oh this is super cool!

2 Likes

Okay thanks so much apologies for the late reply, will add this now. just to confirm if I wanted to implement the code you kindly sent over, would I need to create a separate embed and add it there; alongside the bg video?

So I’ve had a go at this, and I’m not sure If I’ve done it right, Iskandar would it be alright If you had a look at it to see if I have done anything wrong?

link: Webflow - LAB

thanks, Ope Aderin