While browsing airbnb.com I noticed the amazing background video they have there. It’s concise, relevant to what their page is about, and distracts minimally from the Big Search Field. I looked into it for another project and it turns out, Airbnb does it by the book.
- Provide fallback .jpg image for mobile devices
- Provide .webm and .mp4 for different resolutions, and put the .mp4 after the webm.
- Control the layout of your <pre>HTML5 <video></pre> with css (or better: use LESS or SASS)
- Use video’s that are easy to loop and are not longer than 10-15 seconds
- Try crushing the file size as much as you can! Keeping it under 1MB is cool for the folks behind slower connections.
Here is a very useful tutorial over at Demosthenes.info.