Want a new VS Code theme?

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