<div class="vidWrap">

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

</div>

/*

Change width to decimal and divide (you should always get 100 for width)

560 / 5.60 = 100 (new width)

315 / 5.60 = 56.25 (new height)

*/

​

.vidWrap {

  position: relative;

  padding-bottom: 56.25%; /* New height */

  height: 0;

}

.vidWrap iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%; /* New width */

  height: 100%;

}