.video {
  @apply rounded-lg shadow-md;
  overflow: hidden;
  position: relative;
   /* Player ratio: 100 / (1280 / 720) */
  padding-top: 56.25%;
  /* 
   * This is a hack to get the "mini" version playing
   *
   * @reference https://help.vimeo.com/hc/en-us/articles/224972808-Customizing-the-embedded-player#small
   */
  /*max-width: 290px;*/
  /**
   * Mobile Safari does not respect border radius correctly
   */
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.video--as-play-button {
  @apply rounded-full;

  width: 60px;
  height: 60px;

  padding-top: 0;
}

.video--as-play-button .react-player__shadow {
  background: rgba(255, 255, 255, 0.48) !important;
}

.video--as-play-button .react-player__play-icon {
  border-width: 10px 0px 10px 20px !important;
}

.video--as-play-button .react-player__preview {
  background-image: none !important;
}

.video__player {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 700px;
  max-height: 350px;
}