HTML & CSS - - By Kauress

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.

Sponsors
Comments
JayWilsonJr

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,

Jay

Kauress

Hi Jay, thanks! I appreciate that. You can do the conversion online through:
http://www.online-convert.com/ or
http://www.zamzar.com/

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