How to make responsive YouTube embeds

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!