/* Container füllt Parent. Stelle sicher, dass der Parent position:relative und Höhe/Min-Höhe hat. */
.hover-vimeo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Nur das Video wird overscannt, nicht der Container oder das Poster */
.hover-vimeo__overscan {
  position: absolute;
  width: 100%; /* wird durch inline style überschrieben */
  height: 100%; /* wird durch inline style überschrieben */
  inset: 0; /* wird durch inline style überschrieben */
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hover-vimeo__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

/* Poster */
.hover-vimeo__poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .35s ease;
  opacity: 1;
  z-index: 2;
  pointer-events: none;
}
.hover-vimeo.is-playing .hover-vimeo__poster {
  opacity: 0;
}

/* Spinner */
.hover-vimeo__spinner {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  font-size: 20px;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 3;
  pointer-events: none;
}
.hover-vimeo.is-loading .hover-vimeo__spinner {
  opacity: 1;
}