Lehigh Clutch Style Guide

Hero Video 

<section class="video-hero left">
    <div class="video-container">

        <iframe src="https://www.youtube.com/embed/OH01Tj5BF1A?controls=0&autoplay=1&mute=1&playsinline=1&playlist=OH01Tj5BF1A&controls=0&loop=1&modestbranding=1&rel=0"></iframe>
    </div>

    <div class="hero_text">
        <h1>This is Page Heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <div class="hero-buttons">
            <a href="#" class="btn btn-primary dark-grey" role="button">
                <span class="button_text">Action Button</span>
                <span class="arrow fal fa-chevron-right"></span>
            </a>
        </div>
        <!-- end hero-buttons -->
    </div>
    <!-- end hero_text -->
</section>
 
{% set has_content = false %}

{%- if hero_heading['#markup'] or hero_description['#markup'] or button['#markup'] -%}
	{% set has_content = true %}
{%- endif -%}

<section class="video-hero {{ align_text }}">
  <div class="video-container">

  <iframe src="https://www.youtube.com/embed/{{ video_id }}?controls=0&autoplay=1&mute=1&playsinline=1&playlist={{ video_id }}&controls=0&loop=1&modestbranding=1&rel=0"></iframe>
  </div>

  <div class="hero_text{% if (has_content) %} background_color{% endif %}">
    {% block headings %}
    <h1>{{ hero_heading }}</h1>
    {% endblock headings %}
    {% block cms_override_text %}
    <p>{{ hero_text }}</p>
    {% endblock cms_override_text %}
    <div class="hero-buttons">
      {% block hero_buttons %}
      {% for button in buttons %}
        {% include "@a_tag" with button only %}
      {% endfor %}
      {% endblock hero_buttons %}
    </div>
    <!-- end hero-buttons -->
  </div>
  <!-- end hero_text -->
</section>
 
{
  "video_id": "OH01Tj5BF1A",
  "hero_heading": "This is Page Heading",
  "hero_text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
  "has_content": true,
  "align_text": "left",
  "buttons": {
    "1": {
      "text": "Action Button",
      "url": "#",
      "color": "dark-grey"
    }
  }
}
  • Content: 
    .video-hero {
  position: relative;
  width: 100%;
  margin-top: $space_neg_one;
  margin-bottom: $space_and_half;
  overflow: hidden;

  @media (min-width: 1600px) {
    margin-left: -5vw;
    width: calc(100% + 10vw);
    max-width: 102vw;
  }

  @include media-breakpoint-up(md) {
    .video-container {
      // padding-bottom: 56.25%;
      padding-bottom: 36.25%;
    }
  }

  iframe {
    height: 56.25vw;

    @include media-breakpoint-up(md) {
      height: 56.25vw;
      left: 50%;
      min-height: 100%;
      min-width: 100%;
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
    }
  }

  @include media-breakpoint-up(md) {
    .video-container iframe {
      height: 56.25vw;
    }
  }

  .hero_text {
    color: var(--base_font, $base_font);
    order: 2;
    width: 100%;
    padding: $spacer;
    z-index: 100;

    &.background_color {
      background-color: var(--grey_lightest, $grey_lightest);
    }

    .color-scheme-dark & {
      &.background_color {
        background-color: $dark_mode_grey;
        color: var(--white, $white);
      }
    }

    @include media-breakpoint-up(lg) {
      max-width: 50%;
      padding: $space_two;
    }

    h3 {
      font-size: 1.875rem;
    }

    .hero-buttons {
      margin: 0;
    }

    @include media-breakpoint-up(md) {
      position: absolute;
      max-width: 50%;
      left: 3%;
      top: 3%;
    }
  }

  @include media-breakpoint-up(md) {
    &.right {
      .hero_text {
        left: unset;
        right: 3%;
      }
    }

    &.left {
      .hero_text {
        left: 3%;
      }
    }
  }
}
  • URL: /components/raw/hero_video/hero_video.scss
  • Filesystem Path: bits/04-components/heros/hero_video/hero_video.scss
  • Size: 1.6 KB

Display hero where the video the full width.