Grid Video Hero

Creating the popular hero component with a background video has never been easier.

The mark-up for this is very clean. Two child elements: one contains our text and the next is the video.

<div class=“parent”>
  <div class=“content”>[PUT WORDS HERE]</div>
  <video>{ADD SOURCE HERE]</video>
</div>

The styles are very direct:

.parent {
  display:grid;
  grid-template-areas: “a”;
}
.parent > * {
  grid-area: a;
  align-self: center;
  justify-self: center;
}
.parent > *:first-child {
  z-index:2;
}

We could remove the z-index by putting the video ahead of the content — it really comes down to thinking about what your source order should be.

Notice how most of the styles are on the parent. This is the power of Grid. We’re always trying to work from the outside in.

Creating hero components this way doesn’t guarantee that items will maintain their overlap, but it’s definitely easier to write media queries.

See the Pen Grid Video Hero by Dave Cross (@davecross) on CodePen.