JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<div class="media">
  <figure>
    <iframe class="vimeo-video" src="https://player.vimeo.com/video/494366208?autoplay=0&amp;background=1&amp;loop=1&amp;title=0&amp;muted=1" frameborder="0" data-ready="true"></iframe>
  </figure>
</div>

CSS

.media {
  position: relative;
  width: 400px;
}

figure {
  background: red;
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  padding-bottom: 125%; /* (1000 / 800 * 100) */
}

iframe {
  background: green;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}