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=""></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!