Good Tutorial on background video

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.

  1. Provide fallback .jpg image for mobile devices
  2. Provide .webm and .mp4 for different resolutions, and put the .mp4 after the webm.
  3. Control the layout of your <pre>HTML5 <video></pre> with css (or better: use LESS or SASS)
  4. Use video’s that are easy to loop and are not longer than 10-15 seconds
  5. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *