How to make responsive YouTube embeds

You can make YouTube iframes responsive with just a small amount of code:

  1. Copy the embed code from a YouTube video.

  2. Delete its hardcoded width and height.

  3. Wrap it in a div with the class videoContainer, like so:

    <div class="videoContainer">
    <iframe src="https://www.youtube.com/embed/xxx"></iframe>
    </div>
  4. Then, add the following CSS:

    .videoContainer {
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    margin: 1rem 0;
    }

    .videoContainer iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    margin: 0;
    }

Your iframe is now responsive. Huzzah!

I'm Mark Thomas Miller, an engineer, designer, and maker of things.