title: Show a video inside a Bootstrap 4 grid area
body: <p>I used Bootstrap 4 (4.4.1) to make a basic grid structure. It consists of two columns (each 50% width), where the left column has two rows (each 50% height). The upper left grid area should contain a video <strong>inside</strong> of it, without squeezing or squishing it. The rest that overflows should simply be hidden. I basically managed to do all of this except that the video spans over the whole left column, while I want it to be only in the first row of the column (which spans 50% of the columns height).</p>
  
  <p>Relevant HTML snippet:</p>
  
  <pre><code>&lt;div class="container-fluid d-flex h-100 flex-column"&gt;      
    &lt;div class="row flex-grow-1"&gt;
      &lt;div class="col"&gt;
        &lt;div class="row h-50" id="video_wrapper" style="background-color: magenta;"&gt;
          &lt;video id="video" autoplay muted&gt;&lt;/video&gt;
        &lt;/div&gt;
        &lt;div class="row h-50" style="background-color: lime;"&gt;
          bottom left
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col" style="background-color: aqua;"&gt;
        &lt;div&gt;
          right side
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Relevant CSS:</p>
  
  <pre><code>#video_wrapper {
      overflow: hidden;
  }
  
  #video {
      /* Make video to at least 100% wide and tall */
      min-width: 100%; 
      min-height: 100%;
      /* Prevent the browser from stretching or squishing the video */
      width: auto;
      height: auto;
      /* Horizontally flip the video */
      position: absolute;
      transform: scaleX(-1);
  }
  </code></pre>
  
  <p>I tried a lot of stuff, but nothing would work. I have a JSFiddle below. It will use your webcam as the video – turn the webcam off to see the grid structure, the video should be inside the pink area. Unfortunately it also goes into the green area which should stay free. You can see this behavior when enabling your webcam.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/matzewolf/zxbtq569/3/" rel="nofollow noreferrer">https://jsfiddle.net/matzewolf/zxbtq569/3/</a></p>
  
  <p>Any help is really appreciated. Btw, I'm a newbie to web dev and Bootstrap, so please bear with me :)</p>