The if-statement at the bottom is to prevent the video from being higher than the actual viewport, which will force the user to scroll to see the full video. The downside to this is that some black borders will appear on each side of the video, since the aspect ratio now will be wrong.
Lets create a function that creates our iFrame that will later be appended:

We'll only be calling this function if the browser supports HTML5-video and isn't a touch based device, with the help of Modernizr. If not, only the image will be shown. This is because we don't want a mobile user to be forced to download the large teaser video, so it's more responsible to give them just the image. They will not be missing out on any content, since the teaser video is just a shortened version of the full one.

That's about it for the Javascript, you can view in its full version over here.

All done

There you have it, a fully responsive (and pretty mobile responsible) header video, that still works in older versions of Internet Explorer.
You can see all the code, and fork it on Github. Please let me know in the comments if you have any feedback!

Hi,
This is an awesome script. I was able to alter it slighty to what I need – I added a close button to remove the video once it was done and return back to the teaser which has a playlist attached. But, I want to close the video automatically on end. I’m using HTML5 video and the standard .bind(“ended”, …) doesn’t seem to work. I tried to create a listener in the init but that didn’t do anything. Should be easy but do you know of a good way of making this work? Any help would be greatly appreciated. Cheers.

I just have one question, how to make the video fill the 100% height in Chrome and IE11 ? It is ok on Firefox, but in those two, there is a small portion of the holding container visible near the bottom, color applied to the body is easily visible.

So cool! But when I click the play button it just takes me to vimeo? It works on your demo I see… but if I download that page to ensure I have no code copying errors I still get forwarded… I thought it might fix when I uploaded to server but no… Why does it link to the vimeo page instead of play the video for me? Thanks!

I was able to get this to work with both Youtube and Vimeo just fine, but how do I get it to load an mp4/ogg file. I want to be able to host my own videos. It seems to be an option, but I must be doing something wrong. Any help would be much appreciated.

Hey Sebastian,
I appreciate you getting back to me. I was able to get the mp4 to load as it should, but it isn’t centered and doesn’t resize to the page. It acts as a background image. Any idea what might be causing that?
Thanks

When your book release, hope I can find it in bookstores in Bangkok, Thailand.( I'm not familiar with online ordering )I always read your blog since I studied in the UK. Even emailed you once, asking for a book-crit. I'm more than happy to see you write your blog again. Please do it regularly.

I think what you’re experiencing is because you’re not running the code on a server. I’ve intentionally removed all HTTP/HTTPS protocols from the URL’s so that URL’s work on both protocols, but that creates some issues if you’re just double clicking the index.html file.

I’m trying to plug this into a wordpress page template. When I insert the code all I see is a broken image icon and the play video button link that takes me to vimeo. Any thoughts on why this may be happening?

EDIT
I guess I’m having the same problem as Bee and Alan. I am using code from the new downloaded project on github but it still is not working. When I press play video it takes me to vimeo. Even when I turn autoplay on it still won’t play. Might be a problem with sourcing my video? just linking to youtube.

Hi, I use this simple tool http://embedresponsively.com/. Just take the video URL and put it into embedresponsively.com and then it will makes the code for you. You can then just copy the code and paste it into your HTML at your webpage – you’re all done
Sophie

When I click the play button, it is linking to Vimeo and also it is not autoplaying for me. I know others have had this issue but I’ve downloaded the latest files and I’m still having this issue.
The page on my website is here:http://purplecubed.com/video-play/

How can I control the height of the video? I want the video to not take up as much horizontal height of the layout. I’m not finding any parameters for height in style.css or script.js.
How can I manage the hight of the video?

Hello Sebastian,
First off, great job on the tutorial. I appreciate it. I have one question, when I reduce the video height to 500px for example, video seems to be zoomed-in and the rest of the video plays behind the divs below and not visible. Is there any way I can reduce the video without losing any part of the video? so it matches the height I set for it?

Hello, I am having a similar problem like Tiago. I want to have multiple videos on one page. I edited the script and CSS styles, but it still doesn’t work. Seems like the first script blocks the second one. I would appreciate if you could provide a solution for placing multiple videos on one page with this script.

I just recently found your post on responsive header videos. Very cool way of doing this.
I have a quick question if you don’t mind. I was wonder, what did you do to get rid of the play arrow button over the video when the demo site is viewed in a iphone.

You can split the videos in to three different lists and using some simple slider. I think bootstrap is easy to implement. Please visit http://www.getbootstrap.com find the slider. I hope that this may help you. Let me know if you need any help.

Sebastian,
There is a problem with mobile devices.
Header with video doesn`t cover whole area of the viewport (in vertical orientation). It just resized according to the aspect ratio of the movie. Is there any way to make it cover 100% of viewport under any viewport sizes (with cutting video on the left and on the right)?

Nice script you have got here and am loving it. Please, is there anyway to play multiple videos (mp4) of my own one at a time? Like, after the 1st video finished playing, the 2nd video should play, after that, the 3rd video, then on and on and on like that.

That seems like a self-fulfilling prophesy to me. I just want the music player to rotate songs, not pick the ones I’m already listening to. And I can’t get behind subscription services. Steve was right, . I love my Pandora One bec. it helps me find new music better. But, that’s just how I like to listen.