Responsive Vimeo embed for reading.supply articles

vimeo.js

const NATURAL_NON_ABSOLUTE_ELEMENT = css`
  display: flex;
  white-space: wrap;
  position: relative;
  /* CHANGE THIS: The padding-top percentage depends on the video's aspect ratio. height / width */
  padding: 75% 0 0 0;
`

const CLASSIC_WEB_CSS_INVISIBLE_TEXT_HACK = css`
  visibility: hidden;
  opacity: 0;
  height: 0px;
`

const IFRAME_STYLE_REPLACEMENT_REQUIRED = css`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
`

const element = (
  <div className={NATURAL_NON_ABSOLUTE_ELEMENT}>
    <div className={CLASSIC_WEB_CSS_INVISIBLE_TEXT_HACK}>
      {"                                                                                                                                                                                                                      "}
    </div>
    <iframe
      src="https://player.vimeo.com/video/387376944?autoplay=1&loop=1&color=747cff&title=0&byline=0&portrait=0"
      className={IFRAME_STYLE_REPLACEMENT_REQUIRED}
      frameborder="0"
      allow="autoplay; fullscreen"
      allowfullscreen
    ></iframe>
  </div>
)

render(element)