How to make responsive YouTube embeds

June 04, 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!

Want more?

My newsletter sends rarely. It's where I share updates on the best of my writing: introverted entrepreneurship, esoteric mindset tips, notes from great books, and automating businesses as a solo-owner so they run by themselves. Want to join?

Subscribe