background-video: using the <video/> tag, how to save performance for large video size?

I currently have a 471.9 MB .mp4 video in my local directory that I want to ultimate use for a background video for a portal landing page. I"m bringing the video into my component like so:
import videoBG from "./video/bgVideo.mp4";

return(
<video src={videoBG} autoPlay muted loop></video>
)
import videoBG from "./video/bgVideo.mp4";

return(
<video src={videoBG} autoPlay muted loop></video>
)
Does anyone know of any tools I can use to allow me to use the video, but without the browser having to download 471.9MB in order for the page to load? I was thinking maybe a way to remote host a video or something? Any input is appreciated.
25 Replies
Jochem
Jochem10mo ago
"portal" might imply something like a single machine or small number of machines that load this page and display it for people to interact with it in a store or something? Or is this a landing page for a website that people on the internet are going to visit? if it's a kiosk type thing, then probably don't worry about it, it'll get cached. If it's an open-on-the-internet thing, you'll have to seriously reduce that video size somehow, or rethink using a video as a background If I visited your site on a metered connection (on my phone for example) and found out you just ate 10% of my data cap for a background video, I'd be super pissed 🤣
thethingisback
thethingisback10mo ago
lol I know I know. I just added it with the intent to possibly remote host it and embed a link or something like that. I'm also reducing to 720p RE: the 'portal'.. Portal may be a bad name for it. Approved customers (whose applications have already been approved are going to be sent a link via email, and the email link will send them to the 'login' page, where they'll be invited to create an account. From there on, they'll be able to use their login info to get into a "portal" area where they can view their past transactions and make new reservations/purchases, or chaneg their profile infomation if needed, etc
Jochem
Jochem10mo ago
that sounds very application-y, isn't a background video going to be distracting?
thethingisback
thethingisback10mo ago
Or else I'll use it on the login screen instead
Jochem
Jochem10mo ago
I've done some googling, there's people saying "no one is going to want to download a 20mb video", so like... 500 is just bonkers
thethingisback
thethingisback10mo ago
the 720 version is now 63.9MB
Jochem
Jochem10mo ago
that's only good in comparison with the original 500, really
thethingisback
thethingisback10mo ago
but really I wanted to embed a link somehow so that data load it off-loaded to somewhere else and doesn't affect page load? Isn't that possible?
Jochem
Jochem10mo ago
you can lazy load it maybe, but the page isn't going to look loaded without the video, once the video starts playing like, it's going to be noticeable that the video loads in later
thethingisback
thethingisback10mo ago
right that's why lazy loading does't really help I swear I though you could upload the video to something, and then just embed a link to that or something
Jochem
Jochem10mo ago
a CDN? that's still going to have to load it sounds like you're asking for the video to be loaded without having to load the video
thethingisback
thethingisback10mo ago
lol I am I don't get it then. How do people manage to use background videos
Jochem
Jochem10mo ago
they compress the everloving fuck out of them until they're 1 or 2mb also, I've honestly never used a site where I've gone "Huh, cool background video, that really adds something to the usability of this website"
thethingisback
thethingisback10mo ago
No I know, I'll just use one really. Probably I'll move it to the login screen. I would probs be too distracting for the actual home page. And I'm planning to put ina. pause tool too so compression though is basically it
Jochem
Jochem10mo ago
just consider shortening it and compressing it more. reducing the filesize to at the very highest 10MB would be my goal
thethingisback
thethingisback10mo ago
gotcha okay
Jochem
Jochem10mo ago
and remember to test on multiple browsers for codec support too
thethingisback
thethingisback10mo ago
okay, codec support
Jochem
Jochem10mo ago
oh, and don't forget to strip the audio out
thethingisback
thethingisback10mo ago
Masuga
Best Practices for HTML Background Video Optimization | Masuga
Background videos can make an impact on your users, but need to be properly optimized. This post covers the main aspects of background video optimization.
thethingisback
thethingisback10mo ago
Do you know of a specific video editing tool you'd recommend to do this compression with, and possibly other adjustments like frame rate?
Jochem
Jochem10mo ago
I'd probably do it with ffmpeg, but there's online tools too. No idea though, like I said, not a fan of background videos
dys 🐙
dys 🐙10mo ago
If you're looking for a GUI, HandBrake has some useful presets.
thethingisback
thethingisback10mo ago
Thank you, that made it super easy
Zoë
Zoë10mo ago
Resolution does affect file size but not by much, what you want to play with is bit rate. Just be aware that low bit rate videos are most noticeable when dark, you can crunch light videos down to barely anything Also, save the first frame of the video and if navigator.connection.saveData is true then show the still frame but if false you can load the video. You could also just have the image as default and swap it to a video
Want results from more Discord servers?
Add your server