JSFiddle - React, Tailwind, and code Playground

by luwes

HTML

<div class="cropper">
  <div class="aspectratio">
    <iframe src="https://player.vimeo.com/video/292992048?transparent=0&muted=1&autoplay=1" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

CSS

.cropper {
  overflow: hidden;
  position: relative;
  height: 0;
  padding-bottom: 53%;
}

.aspectratio {
  position: relative;
  transform: translateY(-3%);
  height: 0;
  padding-bottom: 56.25%;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}