I'm making a faster alternative to DevTools. Try it here.

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>
  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!