.video {
  text-align: center;
  max-width: 1600px;
  margin: 24px auto;
}

.video[data-embed-loaded='false']:not(.placeholder) {
  /* reserve an approximate space to avoid extensive layout shifts */
  aspect-ratio: 16 / 9;
}

.video > div {
  display: flex;
  justify-content: center;
}

.video video {
  max-width: 100%;
}

.video .video-placeholder {
  width: 100%;
  height: 30vw;
  position: relative;
}

.video .video-placeholder > * {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.video[data-embed-loaded='true'] .video-placeholder,
.video[data-embed-loaded='false'] .video-placeholder + * {
  visibility: hidden;
  height: 0;
  width: 0;
}

.video .video-placeholder picture img {
  width: 100%;
  object-fit: cover;
}

.video .video-placeholder-play button {
  position: relative;
  display: block;
  width: 78px;
  height: 78px;
  padding: 0;
  background-image: url('/icons/play-triangle.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: unset;
  border-width: 0;
  filter: drop-shadow(1px 0 6px rgb(0 0 0 / 30%)) opacity(0.7);
}

.video .video-placeholder-play button::before {
  display: none;
}