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).
</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"); 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