JSFiddle - React, Tailwind, and code Playground

by mcoker

HTML

<div class='embed-container'>
  <iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

CSS

.embed-container {
      --video--width: 1296;
      --video--height: 540;

      position: relative;
      padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
      overflow: hidden;
      max-width: 100%;
      background: black;
    }

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }