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 🙇♂️
Top comments (0)