What's the best practice for hero/background video settings for website homepage?
A client wants a video-loop in the background of their homepage and I'm finding all sorts of different advice on what's the best format/size/framerates, etc.. Does anyone have advice on what would actually be the right way to do it?
Replies8
- @Kevin M Great. Thanks again.
- @Tony Clarkson you're welcome.Having inview or similar as an option depends on the framework that the site is built with. Autoplay and Mute are the important bits, Inview is a nice bonus to free up resources for the rest of the page if you can.
- @Kevin M Thanks Kevin - Inview is new to me. Is that an instruction to add in through the site back-end or is it a setting you can add via the host?
- I think with video it's better to have them hosted (Vimeo or Youtube) and let the host handle encoding and streaming the best picture quality based on each users connection speed. Your front-end framework should responsively adjust the aspect ratio of the video to suit the device it's loaded on.My advice would be to:- use a placeholder image so that the background isn't blank while the video buffers- always mute the audio as others have suggested- hide the player controls so that they don't show with the video- set the video to only play 'inview' so that it's not continually streaming when the user has scrolled past it
- @Anna Robinette Definitely no sound! I've jumped out of my skin on some occasions when I've browsed a site and my volume's high. It's mainly formats I'm unsure of. Reading up, some say one format, some another. Will it/won't it work on devices, etc. I keep finding contradictions.I'd rather leave it off all together…
- I find it annoying if a video plays sound automatically. By all means have a video with sound muted, but give me a chance to adjust my volume settings for my environment before unmuting!
- @Darren Ross Thanks Darren, I'll give that a go.
- I'm not a fan of video loops - they add little value to a site, ramp up your CPU rate and can be slow to download, especially on mobile. One trick I use is to have the video, say, half the size (width and height) you want it to be (i.e. half the size of the maximum width of your site, ), then use CSS to double the size (i.e. to the size you want it). You lose a little bit of quality obviously, but it enormously reduces the file size of the video.
You must sign up or log in before you
add a comment.