How to Get Rid of YouTube Player Black Bars

When embedding YouTube videos into a webpage, getting rid of the black bars and creating a fully responsive player can be confusing.

Suppose I have this <iframe> wrapped inside a <div>.

<div class="videoContainer">
  <iframe src="https://www.youtube.com/watch?v=E1tofEyT8Jg"></iframe>
</div>

We can style .videoContainer and .player like so.

.videoContainer {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.videoContainer iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 0;
}

We want 56.25% for padding-bottom because it corresponds to a 16:9 aspect ratio (9 / 16 = 0.5625).

This will give us a responsive YouTube player free of black bars.