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
Смотрите видео HTML Video Backgrounds 🎥 (featuring SvelteKit & Tailwind) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 06 Март 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,605 раз и оно понравилось 76 людям.