Promoted Video

Preview

HTML Code

<style>
.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;
}
}
</style>

<div class="container explore-widget">
  <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>