video {
  margin: 0 auto;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  height: 100dvh;

  --mask:
    linear-gradient(#000 0 0) center / calc(100% - 14px) calc(100% - 14px) no-repeat,
    conic-gradient(from  135deg at top   , #0000, #000 1deg 89deg, #0000 90deg) 0 0    / 14px 7px space no-repeat,
    conic-gradient(from  -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 0 100% / 14px 7px space no-repeat,
    conic-gradient(from   45deg at left  , #0000, #000 1deg 89deg, #0000 90deg) 0 0    / 7px 14px no-repeat space,
    conic-gradient(from -135deg at right , #0000, #000 1deg 89deg, #0000 90deg) 100% 0 / 7px 14px no-repeat space;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

.video-container {
  display: grid;
  gap: 2em;
  grid-template-columns: 1fr;
  padding: 1em;
}
.video-container figure {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 30em;
}
@media (min-width: 67em) {
  .video-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .video-container figure {
    min-height: unset;
  }
  .video-container .portrait__9-16 {
    aspect-ratio: 9 / 16;
    grid-row-start: span 2;
  }
  .video-container .portrait__4-5 {
    min-height: 25em;
  }
}
.video-container figcaption {
  width: 100%;
  height: auto;
}
.video-container figure:hover figcaption {
  opacity: 1;
}
.video-container iframe {
  flex: 1;
  width: 100%;
  height: auto;
}
.video-container iframe:fullscreen {
  width: 100vw;
  height: auto;
}