Video

<div class="video-hero" style="background-image: url('/assets/images/video-hero-poster.jpg')">
    <a class="video-hero__link" href="#">
    <video class="video-hero__video" poster="/assets/images/video-hero-poster.jpg" autoplay muted loop src="/assets/videos/video-hero-video.mp4"></video>
    <img class="video-hero__content-image" src="/assets/images/video-hero-logo.png" sizes="(min-width: 1025px) 27vw, (min-width: 681px) 30vw, 50vw"
      srcset="/assets/images/video-hero-logo-small.png 160w, /assets/images/video-hero-logo-medium.png 200w, /assets/images/video-hero-logo.png 300w">
  </a>
</div>
<div class="video-hero" style="background-image: url('{{poster}}')">
  <a class="video-hero__link" href="{{this.path}}">
    <video class="video-hero__video" poster="{{poster}}" autoplay muted loop src="{{video}}"></video>
    {{#if contentImage}}
    <img class="video-hero__content-image" src="{{contentImage.xlarge.path}}" sizes="(min-width: 1025px) {{contentImage.xlarge.vw}}vw, (min-width: 681px) {{contentImage.medium.vw}}vw, {{contentImage.small.vw}}vw"
      srcset="{{contentImage.small.path}} {{contentImage.small.width}}w, {{contentImage.medium.path}} {{contentImage.medium.width}}w, {{contentImage.xlarge.path}} {{contentImage.xlarge.width}}w">
    {{/if}}
  </a>
</div>
{
  "path": "#",
  "poster": "/assets/images/video-hero-poster.jpg",
  "video": "/assets/videos/video-hero-video.mp4",
  "contentImage": {
    "small": {
      "path": "/assets/images/video-hero-logo-small.png",
      "width": "160",
      "vw": "50"
    },
    "medium": {
      "path": "/assets/images/video-hero-logo-medium.png",
      "width": "200",
      "vw": "30"
    },
    "xlarge": {
      "path": "/assets/images/video-hero-logo.png",
      "width": "300",
      "vw": "27"
    }
  }
}
  • Content:
    .video-hero {
      position: relative;
      width: 100%;
      height: 180px;
      background-position: center;
      background-size: 100% auto;
      overflow: hidden;
    
      @include breakpoint($breakpoint-md) {
        height: 290px;
      }
    
      @include breakpoint($breakpoint-xl) {
        height: 440px;
      }
    
      @include breakpoint($page-width-max) {
        height: 610px;
      }
    }
    
    .video-hero__video {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: auto;
      transform: translate(-50%, -50%);
    
      @include breakpoint($breakpoint-md) {
        display: block !important;
      }
    }
    
    .video-hero__content-image {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 160px;
      transform: translate(-50%, -50%);
      filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5));
    
      @include breakpoint($breakpoint-md) {
        width: 200px;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 275px;
      }
    
      @include breakpoint($page-width-max) {
        width: 300px;
      }
    }
    
  • URL: /components/raw/video-hero/video-hero.scss
  • Filesystem Path: src/components/02-components/hero/video-hero/video-hero.scss
  • Size: 933 Bytes
  • Handle: @video-hero
  • Preview:
  • Filesystem Path: src/components/02-components/hero/video-hero/video-hero.html

There are no notes for this item.