On a fine winter's evening, much pain was felt undertaking a treacherous endeavour of fitting a video element inside its parent.

After failed ventures seeking answers from the World Wide Web, and sounding many explicatives to the browser, good old blindly-led trial-and-error saves the day once again.

ENTER, THE CODE...

This works for a parent with dynamic or explicit sizing, I'm using it within a CSS grid cell.

Style your <video /> with this CSS and smile 😄

video {
  height: 0;
  width: 0;
  min-height: 100%;
  min-width: 100%;
}

I was amazed that none of the answers I found out there solved this seemingly trivial challenge. I didn't want anybody else to experience such meaningless pain, so here you go.

You're welcome 🙇‍♂️