Preview

HTML

<div class="container mt-12">
  <div class="zap-intro">
    <div class="zap-intro__video">
      <div class="zap-intro__video-wrapper">
        <!-- Add video URL below -->
        <iframe src="" class="absolute top-0 left-0 w-full h-full"></iframe>
      </div>
    </div>

    <div class="zap-intro__text text-brand-primary text-left">
      <h2 class="text-2xl lg:text-4xl">Title</h2>
      <p class="text-base lg:text-lg">Description</p>
        <!-- Add button URL below -->
        <a href="" class="btn btn--primary btn--lg">Button text</a>
    </div>
  </div>
</div>

CSS

.zap-intro {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.zap-intro__video {
  flex-basis: 50%;
  max-width: 50%;
}

.zap-intro__text {
  flex-basis: calc((100% / 12) * 5);
  max-width: calc((100% / 12) * 5);
}

.zap-intro__video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.zap-intro__video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
}

@media (max-width: 959px) {
.zap-intro__video,
.zap-intro__text {
  flex-basis: 100%;
  max-width: 100%;
}

.zap-intro__text {
  margin-top: 20px;
  }
}