Responsive media (images and videos) using only CSS

There’s no reason to explain everything from scratch, there are plenty of posts on this topic, but if you are building a responsive layout, don’t forget to apply these media rules to your CSS file.

/* Images */
img {
  max-width: 100%;
  height: auto;
}

/* HTML5 videos */
video {
  max-width: 100%;
  height: auto;
}

/* Embedded Videos */
.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

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

With the above styling rules we ensure that all of our media files (images and videos) are ready for responsive layouts. The first two rules are very easy to understand and probably the safest and simplest way to publish media online (since we are talking about pure HTML5 elements). The final two rules are for embedded media (objects, embeds and iframes), that we simply wrap into a container/wrapper element (with a class of video). I first read of this technique on a post entitled “CSS: Elastic Videos” and personally I believe that it’s the best solution for responsive video embeds. I’m usually against Javascript solutions/alternatives, like for example FitVids.JS, since it’s a pure presentational (CSS) issue and not a functional (Javascript) one.

So if you’re building a responsive layout, try treating your media with the pure CSS approach. It’s the fastest, simplest and cleanest way to achieve responsive media…