Engine:

Do a web search for

responsive video padding-bottom 56.25%;

There was a real smallish website I learned it from, but I can't recall the name.

In your CSS create the following class:

.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 60px; overflow: hidden;
}

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

And finally put your youtube video inside a div container like this:
<div class="responsive-vide">...</div>.

Hope that helps!

Philip Song

[edited by: travelin_cat at 1:21 pm (utc) on Apr 22, 2015]
[edit reason] Removed url [/edit]

Just about every article on this topic from a well known source acknowledges the work of Thierry Koblentz in his May, 2009 A List Apart article and offers a link to his article as a citation. Koblentz clearly explains what he describes as a simple basic concept behind what he's doing. His article is worth a read...

Creating Intrinsic Ratios for Video
by Thierry Koblentz May 26, 2009
[alistapart.com...]

The concept
The idea is to create a box with the proper ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box. It's that simple.

The trick
The padding property is the magic that styles a box with an intrinsic ratio. This is because we'll set padding in a percentage, based on the width of the containing block....

A more recent article on the topic by Rachel McCollin, expanding on what Koblentz has done, was published in Smashing Magazine....

Making Embedded Content Work In Responsive Design
By Rachel McCollin
February 27th, 2014
[smashingmagazine.com...]

A few HTML elements don't play nice with responsive layouts. One of these is the good ol' iframe, which you may need to use when embedding content from external sources such as YouTube.

In this article, we'll show you how to make embedded content responsive using CSS, so that content such as video and calendars resize with the browser's viewport. For those occasions when non-coders will be embedding video on your website and you don't want to rely on them adding extra markup, we'll also look at a solution that uses JavaScript instead of CSS....

While these may be similar to the code above, I'd recommend following these articles, where the authors clearly had a part in creating the material.

Thanks for the tip on padding Robert. I had always used 20 px, but noticed sometime in the past few months, could have been longer...that the original popular padding dimension suggestion didn't wok anymore. All videos were becoming slightly letter boxed. As I changed the padding to 10 px it's all in alignment again.

I can' t think of why it changed. Even mobile had to be tweaked under 10px

Responsive Embed: [getbootstrap.com...]

Rebuilding a large site now using the Bootstrap Framework. Their Responsive Embed seems to work fine across all devices. You might want to inspect their CSS to see what they've got going on.

Two Sizes Available: 16by9 and 4by3

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

I gave up tinkering with this stuff.

Wistia takes care of it all with their "video foam"

16:9

D'oh! I was staring at earlier posts trying to figure out the significance of 9/16 (i.e. 56.25%).