Streaming live at 10am (PST)

Make Webflow's Background Video PLAY on iOS and Android


#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:

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:


Background video on mobile (2018)
How to get a video autoplay on mobile?
Implementing Gif w/ big file size >4MB
HTML video help
I must remove ugly grey play button on BG Video
#2

This is pretty dope!


#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!


#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.