Responsive Video Max-width

Question

I found some code that will help video embeds be responsive: http://alxmedia.se/code/2013/10/make-wordpress-default-video-embeds-responsive/

The problem is not the code, the code is working great! You can see a live example at: http://joshrodg.com/hall/ - this is very much in development, just scroll down and check out the videos :-)

What I'd like to do is set a max-width. When I set a max-width on the current div, the video gets chopped off and there are black bars on the top and bottom. I'd love it if there was a way to set a max-width while preserving the aspect ratio. The videos are just too huge to leave it at 100% wide...I was think more like 600px, but still scaling on smaller screens so that everything remains responsive.

The current code I am using has been slightly adjusted from the original source, so I'll go ahead and post it here...

The function:

function video_embed( $html ) {
    return '<div class="video-wrap">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'video_embed', 10, 3 );

The CSS:

.video-wrap {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}

.video-wrap iframe,
.video-wrap object,
.video-wrap embed,
.video-wrap video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

Generated Output:

<div class="video-wrap">
    <iframe width="500" height="281" src="https://www.youtube.com/embed/hevFL7CiUx4?feature=oembed" frameborder="0" allowfullscreen=""></iframe>
</div>

Answer 1

So, apparently, I needed to read a little bit more before I posted my question.

After I posted the question, I ran across: https://moodle.org/mod/forum/discuss.php?d=258650, which is what I incorporated into the code I was using.

I modified my function to look like:

function video_embed( $html ) {
    return '<div class="video-container"><div class="video-wrap">' . $html . '</div></div>';
}
add_filter( 'embed_oembed_html', 'video_embed', 10, 3 );

I added the following css:

.video-container {
    max-width: 400px;
}

So, what I did was add a video-container div that wrapped around my video-wrap div, where I specified a max-width.

I tried all different widths, all of which are now working :-)