Hero - Video - ViacomCBS UI Kit

PREVIEW

HTML
SCSS

<div class="hero-video">
    <h2 class="component-title">HTML5 Video</h2>
    <div class="hero-video-wrap">
        <video controls poster="/images/photos/about-business.jpg">
            <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
        </video>
    </div>
    <div class="hero-video__actions">
        <a href="#" class="btn btn-link">View our Global Business Conduct Statement&nbsp;<i class="fa fa-long-arrow-right"></i> </a>
    </div>
</div>

<div class="hero-video">
    <h2 class="component-title">Vimeo Embed</h2>
    <div class="hero-video-wrap">
        <iframe src="https://player.vimeo.com/video/582575561?h=8592c4e3eb" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="hero-video__actions">
        <a href="#" class="btn btn-link">View our Global Business Conduct Statement&nbsp;<i class="fa fa-long-arrow-right"></i> </a>
    </div>
</div>

<div class="hero-video">
    <h2 class="component-title">Youtube Embed</h2>
    <div class="hero-video-wrap">
        <iframe src="https://www.youtube.com/embed/FR-1sa-x3Gg" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="hero-video__actions">
        <a href="#" class="btn btn-link">View our Global Business Conduct Statement&nbsp;<i class="fa fa-long-arrow-right"></i> </a>
    </div>
</div>

.hero-video {
  margin-bottom: 4rem;
}

.hero-video-wrap {
  position: relative;
  padding-bottom: 56.25%; // 16:9
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 1.6rem;

  iframe,
  object,
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.hero-video__actions {
  text-align: right;
}