Grid Display Video Preview

Would like to emulate

by Chris

HTML

<div class="video_2" id="video_gallery">

  <div class="video_wrapper">
    <div class="video_container">
      <video autoplay="" loop="" muted="" playsinline="">
        <source src="https://imagen.research.google/video/hdvideos/41.mp4" type="video/mp4"></video>
      <div class="caption">
        <div>Melting ice cream dripping down the cone.</div>
      </div>
    </div>
  </div>

  <div class="video_wrapper">
    <div class="video_container">
      <video autoplay="" loop="" muted="" playsinline="">
        <source src="https://imagen.research.google/video/hdvideos/15.mp4" type="video/mp4"></video>
      <div class="caption">
        <div>A panda bear driving a car.</div>
      </div>
    </div>
  </div>

  <div class="video_wrapper">
    <div class="video_container">
      <video autoplay="" loop="" muted="" playsinline="">
        <source src="https://imagen.research.google/video/hdvideos/3.mp4" type="video/mp4"></video>
      <div class="caption">
        <div>A british shorthair jumping over a couch.</div>
      </div>
    </div>
  </div>

  <div class="video_wrapper">
    <div class="video_container">
      <video autoplay="" loop="" muted="" playsinline="">
        <source src="https://imagen.research.google/video/hdvideos/42.mp4" type="video/mp4"></video>
      <div class="caption">
        <div>Melting pistachio ice cream dripping down the cone.</div>
      </div>
    </div>
  </div>

  <div class="video_wrapper">
    <div class="video_container">
      <video autoplay="" loop="" muted="" playsinline="">
        <source src="https://imagen.research.google/video/hdvideos/49.mp4" type="video/mp4"></video>
      <div class="caption">
        <div>Studio shot of minimal kinetic sculpture made from thin wire shaped like a bird on white background.</div>
      </div>
    </div>
  </div>

  <div class="video_wrapper">
    <div class="video_container">
      <video autoplay="" loop="" muted="" playsinline="">
        <source...

CSS

body {
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 300;
  padding: 0;
  margin: 0;
  background-color: #222222;
  color: rgb(245, 245, 245);
}

p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: white;
  font-weight: 500;
}

a.read-paper {
  width: 200px;
  height: 50px;
  display: inline-block;
}

a.read-paper button {
  width: 200px;
  background: none;
  font: inherit;
  border: 1px solid white;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  line-height: 50px;
  font-weight: 300;
}

a.read-paper button:hover {
  background-color: #333333;
}

div.header {
  height: 200vh;
  margin: 0;
  padding: 0;
}

div.header div.stack {
  height: 100vh;
  position: absolute;
  width: 100vw;
  display: flex;
  align-items: center;
}

div.title {
  margin: 0 auto;
}

div.section_header {
  margin: 0;
  padding: 50px;
  background-color: #000000;
}

div.caption {
  margin: 0;
  padding: 25px;
  background-color: #333333;
}

div.video_2 {
  display: flex;
  flex-wrap: wrap;
}

div.video_container {
  display: grid;
}

div.video_container video {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
  width: 100%;
}

div.video_container div.caption {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  display: flex;
  align-items: center;
  background: transparent;
  margin: 0;
  padding: 0;
}

div.video_container:hover div.caption {
  background-color: rgba(0, 0, 0, 0.8);
}

div.video_container div.caption div {
  margin: 0 auto;
  display: none;
  font-size: 1.25em;
  padding: 25px;
  text-align: center;
}

div.video_container:hover div.caption div {
  display: block;
}

video {
  width: 100%;
}

#zoom_box {
  height: 100vh;
  display: flex;
  justify-content: center;
}

#zoom_in {
  width: 25%;
}

#cdm_box div.cdm_stage {
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 50px;
}

#cdm_box div.cdm_stage div.top {
  min-width: 400px;
  min-height: 400px;
  display: flex;
  align-items: center;
}

#cdm_box...