Today it’s very easy to embed some youtube or vimeo content into your website. Just copy and paste the embed code in your HTML files or CMS editor. This works well for static pages, because you can define your custom video dimensions.

But this is not suffient for responsive websites and, if you just define the iframe max-width: 100% by CSS, you still have a problem with the height. The solution is a wrapper around the iframe:

<div class="video-container">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/sftuxbvGwiU" frameborder="0" allowfullscreen></iframe>
</div>

and just a simple basic CSS:

.video-container {
  position: relative;
  padding-bottom: 56,25%;
  height: 0;
  width: 100%;
  overflow: hidden;
}

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

The video-container has a fluid width and height. The height defines the ratio 16:9. If you need 4:3 just set the padding-bottom: 75%.

If you can’t wrap the iframe content in your editor, or if you have a lot of old content, it’s possible to add the wrapper with jQuery:

$jQuery('iframe[src*="youtube"], iframe[src*="vimeo"]').wrap('<div class="video-container">');

This works for youtube and vimeo content.