<div class="video-frame-container">
    <div class='video-background ' data-youtube-id=""></div>
    <img class="video-placeholder dp-md-n" src="" alt="">
</div>
<div class="video-frame-container">
    <div class='video-background {{extraClass}}' data-youtube-id="{{youTubeBackgroundId}}"></div>
    <img class="video-placeholder dp-md-n" src="{{mobileImgSrc}}" alt="{{mobileImgAlt}}">
</div>
/* No context defined for this component. */
  • Content:
    .video-frame-container {
      min-height: $min-height-banner;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      z-index: 9;
    
      .video-placeholder {
        object-fit: cover;
        object-position: center;
        height: 100%;
        width: 100%;
      }
    
      iframe,
      video {
        &.video-background {
          display: none;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          &.dp-b {
            display: block;
          }
        }
      }
    
      @include respond-above(md) {
    
        iframe,
        video {
          &.video-background {
            display: block;
          }
        }
      }
    }
    
    .video-frame-bottom {
      position: absolute;
        min-height: $min-height-banner;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      z-index: 9;
    }
    
    .footer-video {
      min-height: $min-height-banner;
      position: relative;
      margin-top: -80px;
      .video-background-footer {
        padding: 10px 0;
        object-fit: cover;
        object-position: center center;
        position: absolute;
    
      }
      @include respond-above(md) {
        margin-top: 100px;
        min-height: 58.88vw;
    
        .video-background-footer {
          height: 100%;
          width: 100%;
        }
      }
      @include respond-above(lg) {
        height: 600px;
      }
    }
    
    .block-video {
      // prevent final video on screen from being interactive
      // and from touching bottom of viewport
    
      min-height: $min-height-banner;
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 12;
      width: 100%;
      height: 100%;
      margin-bottom: 35px;
    }
    
  • URL: /components/raw/video-background/_video-background.scss
  • Filesystem Path: structures/01-atoms/video-background/_video-background.scss
  • Size: 1.5 KB

There are no notes for this item.