Screencast: Create a Responsive Video Header with Bootstrap

Video headers add a personalized touch and are used on sites such as Airbnb, among others. The best thing is that they are really simple to make. Watch and learn how to create a responsive full-width video header for your next website.

In this tutorial I will demonstrate how to use HTML5’s video element, some CSS3, and the Bootstrap framework to code the video header.


  1. #Kauress great tut!!

    I have wondered in the back of my mind for some time how to make video headers. I was quite excited when I saw your tut. Now the gears are turning in my mind and I need a project that needs a video header. Might be time to add one to my portfolio!

    What software do you use to convert the video into the 3 formats?

    Thanks again,