Role of video backgrounds in website design
The year 2015 rose interest in large photo backgrounds and video backgrounds seen on many websites. People tend to use it in header sections, landing pages, single product pages and in parallax sections.
Use cases.
Why are they so much appealing to website users?
Big image backgrounds or video background will add very pleasant mood to your content. Large typography looks very well placed over it. Footage should match closely the category of you content — try slightly adding some value to the section, do not compete with written content.
Preprocessing.
Even if your website is to be shown on 2560 pixels wide screen — do no try to show HD resolution videos! Downsample them to resolution max. 960x540 pixels, keep quality lower than usual (it will incorporate some blurring, but will keep file size reasonable). If your video footage has 30 or 25 frames per second, try lowering it down to 15–20 frames per second, movement will be less smooth but file sizes will drop two times.
Dimming video footage.
You should concern dimming (darkening) a bit video footage used as background. The text (slogans, information, description) visible on top of it will gain more readability.
You can achieve it by processing it in video editor and saving such darkened version of your footage. The other method is to overlay DIV element with semi-transparent image that will pass 25–50% of the original brightness.
Typically we use 2 types of such semi-transparent elements: solid black color with transparency set to 50% or we can use image prepared in such way that some of the pixels are pure opaque black and some of them are fully transparent (no color there).
Fallback for mobile version of your site.
If you have opportunity to differentiate content for mobile and desktop versions of you website — do it definitely!
Do not force mobile users to load multiple megabytes of data to view your website. Instead of it use image fallback for every video footage you show as background.
For mobile versions, replace every:
<video width=”xxx" height=”yyy" autoplay> <source src=”movie.mp4" type=”video/mp4"> <source src=”movie.ogg” type=”video/ogg”>
</video>
with:
<img src=”image.jpg” border=”0" />
