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=""></iframe>

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.