How to make responsive YouTube embeds

Written June 2018

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!