How to Make a Responsive Youtube Embed In HTML & CSS

19 Nov 2022

The Youtube video embed code you copy from Youtube shows a small video on all screen. It’s not responsive. With HTML and CSS, you can turn your video into a responsive youtube video.

You can also just use out responsive Youtube embed generator to make your Youtube video responsive.

how to make youtube videos embed responsive

Start by copying your Youtube video embed code. You can use the my process to get your youtube embed code. You will get an <iframe> code.

<iframe width="560" height="315" src="https://www.youtube.com/embed/glTuJ2kniGg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

responsive youtube embed html

Add a html div container around your iframe.

<div class="youtube-embed">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/glTuJ2kniGg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

The css class youtube-embed will be used to add the responsiveness.

CSS Responsive Youtube Embed

Now time to make the Youtube embed responsive. Add the following CSS code.

.youtube-embed {
  position: relative;
  height: 0;
  padding-top: 56%;
  overflow: hidden;
  max-width: 100%;
}
.youtube-embed iframe { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Responsive Youtube Embed Inline CSS

You can also add the CSS code inline. Use inline CSS when you can’t modify or access the CSS file. With inline CSS, your code will be:

<div style="position: relative; height: 0; padding-top: 56%; overflow: hidden; max-width: 100%;">
  <iframe src="https://www.youtube.com/embed/glTuJ2kniGg" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>

I use the inline CSS method on our responsive Youtube embed generator so that the responsive Youtube video can be added on all types of websites.