Autoplay video not playing on low power mode

Design help General
1

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)

2

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

3

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
4

Oh this is super cool!

2 Likes
6

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?

7

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

8

Thanks a lot for this! Looks like it only works with custom embed, where you can assign an inlinevideo class to a video tag. Otherwise if you just add this class to the default background video element , it assigns the class to the wrapper div, and not the video itself. And looks like there isn’t a way to do it without replacing the bg video element with custom embed?

Also , when there are two or more videos, it only works for one of them, maybe there should be something like for each function?

9

Hi @Ope_Aderinlewo did you find the solution ? I have the same problem… The strange part is that I made this website one month ago, and the autoplay was working perfectly on safari, on mac and iOS. But since today the autoplay is not working anymore both on desktop and iOS with full battery…

Here is my read-only project
https://preview.webflow.com/preview/inteam?utm_medium=preview_link&utm_source=designer&utm_content=inteam&preview=05a8754f4f8304646eda3a7e69c2de85&workflow=preview

@radmitry I didn’t understand your answer, could you explain? :pray:

10

I mean when I tried to apply the .inlinevideo class to my video element on the page this code didn’t work for me. When I looked at the code on the published side, it wrapped the video in a div with this class, instead of adding it to the video element itself. This code only only worked when I replaced my video element with the custom code embed like so:

<video class="inlinevideo" autoplay loop muted playsinline>
  <source src="video.mp4" type="video/mp4">
</video>
11

Here is an updated version of @Iskandar’s code to autoplay the video in Webflow’s inbuilt player

@radmitry @Ope_Aderinlewo @tans

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

Thanks for the updated code, it works perfectly.