video-player {
  display: contents;
}

/*
Required to override any default video styles (such as Tailwind's CSS reset)
and ensure the video element fills the container as expected.
*/
video-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
}

video-player video::-webkit-media-text-track-container {
  transition: transform var(--media-caption-track-duration, 0) ease-out;
  transition-delay: var(--media-caption-track-delay, 0);
  transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
  z-index: 1;
  font-family: inherit;
}