Simple, Responsive YouTube Embed

written by Jeff on 2025-06-04

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.

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]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
© 2025