Make Webflow's Background Video PLAY on iOS and Android

Community resources Webflow Tips
1

Hey guys,

This is a neat little trick to make the background video component actually play videos on iOS / Android devices.

Right now, Webflow disables it and displays a still image instead, due to previous iOS restrictions that have been recently lifted.

You can now use the background video component just like usual, (no need to upload video first, then embed custom code, hack it, etc).

Simply insert this quick javascript code snippet before the </body> tag (second custom code box in your settings), and all background video components inside of your project will play on mobile.

Works on iOS 10 and above | Android Lollipop (5.0) and above

<!-- START: Mobile Autoplay Video -->
<script>
var mobilevideo = document.getElementsByTagName("video")[0];
mobilevideo.setAttribute("playsinline", "");
mobilevideo.setAttribute("muted", "");
</script>
<!-- END: Mobile Autoplay Video -->

Click here for project:

https://webflow.com/website/Experimental-Enable-Webflows-Background-Video-on-iOS

Feel free to clone. Hope this serves you well and saves you headaches!

Goes without saying this is an experiment. Use on your production projects at your own risk :slight_smile:

20 Likes
2

This is pretty dope!

1 Like
3

It works great on iOS11!

I assume this works for iOS10 and above. As for Android, I couldn’t find a clear answer about what versions of Chrome support it.

4

Nice!

Sure — I did some extensive testing on Browserstack last night, as well as with a couple of physical Android devices.

I can confirm this fix works on iOS 10 and above | Android Lollipop (5.0) and above!

2 Likes
5

Wow, brilliant! Thanks so much, perfect timing.

6

Yes, wishing for chrome badly haha

7

All I have to say is:
:clap::clap::clap::clap:

8

Weirdly - I have it working on one of my sites which is amazing.

but no idea why it isnt working on this one http://bars-melody-official-website.webflow.io

Any one have any ideas? I’m stumped.

thanks

S

9

Hey Yall :grinning:
So awesome that it’s finally working. I think this is gonna be huge!!!
Do you have to put the javascript code in the code of the site or in the designer?
Would be great if someone could help me where to implement that. :pray:t2::pray:t2::pray:t2:

I opened the webflow link but i couldn’t find any tags in the designer…

10

@emilvs - I put the code in my page’s custom code in the /body tag area (in the designer) and that worked for me. Hope that helps!

11

Is this still working?

12

Doesn’t seem like this code is working anymore, does anyone have another fix for this? If so i’d really appreciate it.

13

thank you @cpjackman !!

14

Does not work for me too unfortunately :confused:

15

Can’t get this to work. Here is my code and read only link. Am I doing something wrong?

<!-- START: Mobile Autoplay Video -->
<script>
var mobilevideo = document.getElementsByTagName("background-video-2")[0];
mobilevideo.setAttribute("playsinline", "");
mobilevideo.setAttribute("muted", "");
</script>
<!-- END: Mobile Autoplay Video -->

https://preview.webflow.com/preview/built-to-compete?preview=741dd616e80f00bd526057fb8abb8dde

16

I’ve added this code:

<script> var mobilevideo = document.getElementsByTagName("video"); var i; for (i = 0; i < mobilevideo.length; i++) { mobilevideo[i].setAttribute("playsinline", ""); } </script>

That worked for me.

2 Likes
17

works great - many tnx bro!

18

Yes mate, quick question…who are you thanking bcus some work some dont work but one definitely works. Thanks :+1:

19

Yes mate, quick question…added it to what mate? Added it to your custom code or someone else’s code?

1 Like
20

Does anyone have a fix for this now? Seems the cod isn’t work. I had some weird experiences where the background video was working without any custom code but that seemed to be a one time thing and went away.

Thanks guys!

3 Likes