Simple, Responsive YouTube Embed (updated)

written by Jeff on 2025-06-04

Updated: 2025-11-03:

YouTube's default embed code limits the video size to (usually) 530x315. If you'd like a full-width responsive video you can use the CSS aspect-ratio property.

CSS:


iframe[src*="youtube.com"], iframe[src*="vimeo.com"], iframe[src*="youtube-nocookie.com"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

HTML:

  <iframe width="560" height="315" src="https://www.youtube.com/embed/[YOUR VIDEO ID]" referrerpolicy="strict-origin-when-cross-origin" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>


Unlike the option below, this doesn't require the container div or the pseudo-class.



The old stuff:


YouTube's default embed code limits the video size to (usually) 530x315. If you'd like a full-width responsive video, you'll need to wrap the iframe in a container, and use a little CSS to make it behave. There are plenty of variations of this method all over the web, and this one has worked well for me. Make sure you include the referrerpolicy="strict-origin-when-cross-origin" attribute or YouTube will refuse the connection.

CSS: 


.yt-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.yt-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.yt-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

HTML: 


<div class="yt-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/[YOUR VIDEO ID]" referrerpolicy="strict-origin-when-cross-origin" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
© 2025