Responsive youtube or vimeo content

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.

SASS function px2em

Just a little SASS helper to convert px to em during writing CSS.

@function px2em ($font_size, $base_font_size: 16)
  @return ($font_size / $base_font_size) + em

Usage:

article
  font-size: px2em(20)

Is compiled to:

article {
  font-size: 1.25em;
}

and

article
   font-size: px2em(20,20)

Is compiled to:

article {
   font-size: 1em;
 }