HTML Video Backgrounds 🎥 (featuring SvelteKit & Tailwind)
Let’s add a chill VIDEO BACKGROUND in our hero section, using the vanilla HTML video element!
We will be implementing in SvelteKit because I do think it’s the framework that’s closest to writing vanilla HTML: it should be easier to adapt what we're going through today, to your framework of choice!
But we’ll also be using Tailwind, because I do think it’s making styling more accessible to more engineers 😬
Click around the deployed app: https://moving-scapes.vercel.app/
See the code: https://github.com/jmagrippis/moving-...
Highlighted software:
HTML Video Element: https://developer.mozilla.org/en-US/d...
SvelteKit: https://kit.svelte.dev/
TailwindCSS: https://tailwindcss.com/
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— COMMUNITY —
I've started a DISCORD SERVER for us 😱: / discord
— 🥳🥳🥳 —
My own website: https://magrippis.com/
Search for @jmagrippis to find me on socials like Instagram and Twitter!
Between the comment section, the socials, the Discord… let me know somewhere what you’d like me to cover next 🙌
🎶 “Rice Crackers” by Aves, “Pixelate” by Zac Nelson & “Nils Baumgärtel” by Stratlove for the background music 🎶
—
TIMESTAMPS
—
0:00 - Impress with a Background Video 🦸♀️ hero section
0:27 - Why HTML Video and not gifs with CSS?
0:58 - Building the container
2:39 - Adding the video element
3:23 - Adding our source video!
4:49 - 🥳 It works! 🥳 Responsive demo 🥳
5:00 - Size & compression concerns & tips
5:26 - Applying FILTERS for ARTISTIC VISION
6:13 - Providing alternative video formats
6:56 - Different videos for different viewports? ❌
7:47 - Placeholder image with the poster attribute? 🤔
8:12 - Next steps + comment & SUBSCRIBE
Watch video HTML Video Backgrounds 🎥 (featuring SvelteKit & Tailwind) online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 06 March 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,605 once and liked it 76 people.