HTML & CSS
Article
By Kauress

Screencast: Create a Responsive Video Header with Bootstrap

By Kauress
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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.

--ADVERTISEMENT--

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!

Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?