Wrap the iframe in a responsive wrapper and set the iframe to width:100%, and the wrapper is your max-width.

There's a few snippets already online on how to do it (I'm assuming your embedding a YouTube video at the moment).

Here's effectively what I use:

Working version here:
Edit fiddle - JSFiddle


CSS:

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


HTML

<~div class="videoWrapper">
<~iframe src="//www.youtube.com/embed/9fSde2DD8YQ"><~/iframe>
<~/div>

*** remove the '~' in the div and iframe tags above

[DELETED]

Markus, Your code is VERY close to what I need (THANKS!), but I just can't get it the rest of the way.

I am trying to make a responsive youtube container that is centered on the screen with 10% white space on either side.

I did this with the iframe in the Edit fiddle - JSFiddle link you provided, and it looks very close to what I want, but then it pushes the content below the video down too far. It's like the responsive container is still the full size of the video but I'm only displaying in 80% of it and the rest is autofilled with invisible placeholder space which pushes my button below the fold.
.videoWrapper iframe {
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 80%;
}

Can you tell me how I can display a responsive youtube video sandwiched vertically between two images (like a website header on top and a button below) without a bunch of white space/padding between the images and the video?