Full screen Background Video (Autoplay) using HTML5, CSS & JS - Cross-Browser
Channel: Raddy
Date: 2020-11-17

Today, we are going to create a full-screen background video with autoplay (no sound) that is also responsive and I will show you a workaround for older-generation iPad and other devices that require user interaction to make the video play.

Code:
https://raddy.dev/blog/fullscreen-background-video-autoplay-using-html5-css-js-cross-browser/

☕ BuyMeACoffee: https://www.buymeacoffee.com/RaddyTheBrand

Credit & Useful Reads:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
https://stackoverflow.com/questions/16965170/html5-video-autoplay-not-working-correctly
https://webkit.org/blog/6784/new-video-policies-for-ios/

Video: Glowing Purple Grid Lines Tracking In by video
https://www.videvo.net/video/glowing-purple-grid-lines-tracking-in/393674/

1:21 Introduction
3:40 Setting Up Project with Live Server
2:57 Start of development
8:55 Making the video fullscreen with CSS
13:07 Play Video with User Interaction (touch) JavaScript
18:04 Adding Background Overlay
19:27 Wrapping Up - Thank you

Discounts:
⚡ Hostinger: https://www.hostg.xyz/aff_c?offer_id=408&aff_id=69300
⚡ Elementor: https://be.elementor.com/visit/?bta=26518&brand=elementor

Recording Equipment:
◾ Microphone: https://amzn.to/3Ppp8Ok
◾ Shotgun Mic: https://amzn.to/3IVqIot
◾ Camera: https://amzn.to/3z0bxpF
◾ Lens: https://amzn.to/3Pw4s7d
◾ Lighting: https://amzn.to/3PGXvzW

Computer Gear:
◾ Keyboard: https://amzn.to/3PGXvzW
◾ Headphones: https://amzn.to/3PJl9fg
◾ Mouse: https://amzn.to/3z1TGPf

Connect with me:
◾ Website: https://www.raddy.dev
◾ Newsletter: https://www.raddy.co.uk/newsletter

#html #css