Resize height of div per ViewPort (specifically md)

Expected behavior In the tutorial... it gives a couple general ways to control the height by viewport (vh-100). I need to specifically RE-SIZE a div in the md (xs, sm, md, lg) viewport size. What is my best way of doing this?

Actual behavior When the browser sizes to "md" this div takes up most of the screen. if I could shrinking it down, then I could see the video player under it.

Resources (screenshots, code snippets etc.)

enter code here
          <div class="row">
        <div class="col col-lg-3 d-inline">
        <! --- Need this div to resize smaller on md (tablet screen) --->
            <div class="rgba-orange-strong m-5 rounded z-depth-5">
                <a href="https://www.meyerre.com/" target="_blank"><img src="../logos/Meyers-RE-logo-4color.png" alt="Meyer RE Logo" class="img-fluid"/></a>
            </div>
        </div>

        <div class="col-sm-12 col-lg-6 d-none d-sm-none d-md-none d-lg-flex justify-content-center text-center">
                <img src="Taking-Off-Brochure-front-NEW-revision-2017-800w.jpg" width="80%" alt="Taking Off Ballooning Ad" class="img-fluid m-5  z-depth-5"/>
        </div>

        <div class="col col-lg-3 d-none d-sm-none d-md-none d-lg-block">
            <div class="rgba-white-strong border m-5 rounded z-depth-5">
                <a href="https://www.meyerre.com/" target="_blank"><img src="../logos/Meyers-RE-logo-4color.png" alt="Meyer RE Logo" class="img-fluid"/></a>
            </div>
        </div>

      </div>

      <div class="row">
        <div class="col col-lg-3 d-none d-sm-none d-lg-inline text-center">
            <div class="rgba-red-strong m-5 rounded z-depth-5">
                <a href="https://www.meyerre.com/" target="_blank"><img src="../logos/Meyers-RE-logo-4color.png" alt="Meyer RE Logo" class="img-fluid"/></a>
            </div>
        </div>
        <div class="col-sm-12 col-lg-6 text-center">
            <div id="video" class="img-fluid">
            </div>
        </div>
        <div class="col col-lg-3 d-none d-sm-none d-lg-inline text-center">
            <div class="rgba-white-light m-5 rounded z-depth-5">
                <a href="https://www.meyerre.com/" target="_blank"><img src="../logos/Meyers-RE-logo-4color.png" alt="Meyer RE Logo" class="img-fluid"/></a>
            </div>
        </div>
      </div>

enter link description here