Lehigh Clutch Style Guide

Hero Video 

<div class="hero video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/OH01Tj5BF1A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div><!-- end hero -->
 
<div class="hero video">
  <iframe width="560" height="315" src="{{ video_embed }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div><!-- end hero -->
 
{
  "video_embed": "https://www.youtube.com/embed/OH01Tj5BF1A"
}
  • Content: 
    .hero {
  &.video {
    @include media-breakpoint-up(md) {
      margin: 0 auto;
    }
  }
}
  • URL: /components/raw/hero_video/hero_video.scss
  • Filesystem Path: bits/04-components/heros/hero_video/hero_video.scss
  • Size: 93 Bytes

Display hero where the video the full width.