How to make your YouTube embeds responsive

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!

About the author

I'm Mark Thomas Miller, a full stack engineer and designer currently working at ConvertKit. (We're hiring!) People like Arnold Schwarzenegger, Lindsey Stirling, and Tim Ferriss use features I've built to connect with their fans. I'm currently geeking out about Svelte, mechanical keyboards, and minimalist UI design, and replaying Ocarina of Time.