Fluid video height

Question

I found fluidvids.js and am using that on my site, but it only accounts for width. I have some users who have more of a panoramic, narrow height viewport for their browser, and can't see the controls on my video because the window is so wide (900px) that the video width doesn't scale for the height. I'd like to have responsive height, and have looked at several posts on AListApart, etc, and can't find the obvious solution. Let me know if you have any tips or see the glaring thing I'm missing.

Just learning about CodePen, but my relative links to all the js seems to make that a little complicated (sorry).

Here's the link: http://chrisphoto.com/masters2/index.html#chapter-2

Answer 1

For both Vimeo and Youtube videos, wrape the iframe in a div giving it a class "video_wrapper"

.video_wrapper{
    margin: 82px auto; 
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0; width: 80%;
}

.vdo_span iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%; /* Adjust height to your own need */
}

Answer 2

Here you can get some awesome tricks on responsive videos in CSS, youtube iframe too.