@media screen and (max-width: 768px) {
  .video-wrapper {
    text-align: center;
  }
}

.lazy-video {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
}

.lazy-video iframe {border:0}

.lazy-video .before-load {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: #000;
  --animation-hide-image: var(--animationHideImage, 0.4s);
  --animation-overlap: var(--animationOverlap, 0.2s);
}

/*--- optional custom play button ---*/
.lazy-video .before-load span.lazy-video-icon {
  position: absolute;
  top: 45%;
  left: 45%;
  display: block;
  width: 10%;
  aspect-ratio: 1/1;
  height: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s ease-in-out;
}

.lazy-video .before-load:hover span.lazy-video-icon {
  transform: scale(1.2);
}

.lazy-video .before-load.animation-started {
  opacity: 0;
  transition: opacity var(--animation-overlap) ease-in var(--animation-hide-image);

  &:before {
    opacity: 0.75;
    transition: opacity var(--animation-hide-image) ease-in;
  }

  span.lazy-video-icon {
    transform: scale(0.0);
    transition: transform var(--animation-hide-image) ease-in;
  }
}

/*--- placeholder/preview image ---*/
.lazy-video img {
  object-fit: cover;
  height: 100%;
  width: 100%
}