Note: The result is not 100% responsive, there will be some portion of dark background overlay that will be visible as the screen width is reduced. At 1024px and below we are going to replace the video with a background image and use background-size: cover. Even then the entire image will not be visible. You can specify properly sized background images for popular devices like iPad and iPhone via media queries in the stylesheet. That's not covered in the code.

Step 1

Convert your mp4 video to ogv and webm formats using a software like the free Miro Video Converter. Upload these 3 files to /videos.