title: Contain mp4 video inside bootstrap column
body: <p>I want to have a video on my website. But the video is not the same height as the pictures and i need this fixed. How can i make sure the video covers the entire column and is the same height as the other two columns at all times</p>
  
  <p>Currently this is my code:</p>
  
  <pre><code>&lt;div class="container" style="width: 100%;"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4 fullscreen-bg"&gt;
              &lt;video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video"&gt;
              &lt;source src="video/kerntrekken.mp4" type="video/mp4"&gt;
              &lt;/video&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4" style="padding: 0;"&gt;
                  &lt;img src="img/Kluizen.jpg" width="100%" height="354"&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4" style="padding: 0;"&gt;
                  &lt;img src="img/Kluizen.jpg" width="100%" height="354"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this is my css:</p>
  
  <pre><code>.fullscreen-bg {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      z-index: -100;
      padding-left: 0px;
      padding-right: 0px;
  }
  
  .fullscreen-bg__video {
    background-size: cover;
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/GJIgf.png" rel="nofollow noreferrer">https://i.gyazo.com/8210a9c6a5e0aa01225526fa70987b65.png</a></p>