Screencast: Create a Responsive Video Header with Bootstrap

By Kauress

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.


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,



Hi Jay, thanks! I appreciate that. You can do the conversion online through: or

If neither one of these work for you, just google online video file conversion!

Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.