Add Youtube Video as Background in Header
I’ll show you how to add youtube video as a background in the header on your website using HTML & CSS. I will show you how you can just copy + paste the code so it will work on your website.
So I’m not going to go in detail what each line of code does, but this is more of a plug and play video.
The space video I use: • ISS Timelapse - The English Channel a...
I modified code from: https://codepen.io/dudleystorey/pen/P...
Alright, before we start, I just want to mention that YouTube video works well as a background video on desktop, but on mobile, it won’t work, as YouTube blocks it and you can’t autoplay. So the code I will show you works on desktop and on mobile it falls back on the normal background color.
Use YouTube Videos as your Webpage Background in summary:
1. I’ll start by showing how the site looks like now with a normal background.
2. Then we will grab a YouTube embed code
3. After I’ll show you the HTML & CSS code and where to place it in HTML for it to work fullscreen.
4. If you use WIX or another site builder where you only can add HTML, I’ll show a quick tip on how to add the CSS.
5. Lastly, I’ll show you where you can adjust and set up your YouTube Embed settings - like autoplay, muted & loop.
My website recommendations: https://punchsalad.com/recommendation...
PayPal tip jar: https://www.paypal.me/punchsalad
Watch video Add Youtube Video as Background in Header online without registration, duration hours minute second in high quality. This video was added by user TwP - Helping Creators with Tech 30 December 2019, don't forget to share it with your friends and acquaintances, it has been viewed on our site 26,687 once and liked it 243 people.