Youtube Video dynamic resizing with CSS only

Video.js

/* Rest unchanged */
return (
  <div className='video-container'>
    <div className="video">
      <iframe className='video-player' src={embedUrl} frameBorder='0'
              allow='autoplay; encrypted-media' allowFullScreen title='video' />
    </div>

  </div>
);

Video.scss

.video-container {
  position: relative;
  width: 100%;

  &:before {
    content: "";
    display: block;
    padding-top: 56.25%; // 9 / 16 in percent
  }

  .video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    .video-player {
      min-height: 480px;
      width: 100%;
      height: 100%;
    }
  }
}