How to achieve correct behavior for videos in flexbox?

[atyshka]

I'm trying to create a grid of videos that fills as much of the available screen space for a given number of videos, using a sort of responsive tiling. I figured bootstrap flexbox utilities should be a great way to achieve this, but I haven't been able to achieve desired results. Here's what I'd like to happen: I have a container element that takes up full height and width. Then I'd like the videos to fill in rows, with min width of 25% but being able to stretch to a larger width if available. Thusfar my code looks like this:

<div class="h-100 w-100 d-flex flex-row">
    <div class="flex-fill embed-responsive">
        <video class="embed-responsive-item"></video>
    </div>
  </div>

This code almost gets me there, except that the videos are stretching to fill the full height of the screen, I want the height to be intrinsic and not the full height of the container. How can I achieve this with the flex utility classes or custom CSS? Apologies if this is a dumb question, css isn't my forte.