Missouri State University Pattern Library

Hero: Video

There are no notes for this item.

<div id="hero" class="hero expand">
    <div class="container">
        <div role="region" aria-label="Hero video screen reader information" class="screen-reader">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla sequi pariatur itaque.
        </div>
        <video id="video" preload="metadata" autoplay muted playsinline loop poster="../../images/sample-video-loop.jpg">
          <source type="video/webm" src="../../images/sample-video-loop.webm">
          <source type="video/mp4" src="../../images/sample-video-loop.mp4">
        Your browser does not support HTML5 video.
      </video>
        <script src="../../scripts/components/hero.js"></script>
    </div>
    <div class="cta-container">
        <div class="grounding-bar svg-wrapper">
            <svg class="grounding-bars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 20">
          <path fill-rule="evenodd" d="M0 20V0h12v20H0zm24 0V0h12v20H24zm24 0V0h12v20H48z" />
        </svg> </div>
        <div class="ContentBlock call-to-action">
            <div class="eyebrow">
            </div>
            <h2 class="headline">Lorem ipsum dolor sit amet consectetur</h2>
            <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis tenetur blanditiis excepturi.</p>
            <div class="link-bar">
                <ul class="container">
                    <li>
                        <a href="#" class="button">Lorem ipsum</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
 
<div id="hero" class="hero expand">
  <div class="container">
    {{#if image}}
      <img class="image" src="{{path image.src}}" alt="{{image.alt}}" />
    {{/if}}
    {{#if video}}
      {{#if video.alt}}
        <div role="region" aria-label="Hero video screen reader information" class="screen-reader">
          {{video.alt}}
        </div>
      {{/if}}
      <video id="video" preload="metadata" autoplay muted playsinline loop poster="{{path video.poster}}">
        {{#each video.sources}}
          <source type="video/{{type}}" src="{{path src}}">
        {{/each}}
        Your browser does not support HTML5 video.
      </video>
      <script src="{{path '/scripts/components/hero.js'}}"></script>
    {{/if}}
  </div>
  {{#if cta}}
    <div class="cta-container">
      <div class="grounding-bar svg-wrapper">
        {{> @grounding-bars-vertical}}
      </div>
      {{render '@call-to-action' cta}}
    </div>
  {{/if}}
</div>
 
{
  "cta": {
    "eyebrow": "Lorem ipsum",
    "headline": "Lorem ipsum dolor sit amet consectetur",
    "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis tenetur blanditiis excepturi.",
    "linkBar": {
      "link": [
        {
          "text": "Lorem ipsum",
          "url": "#"
        }
      ]
    }
  },
  "video": {
    "poster": "/images/sample-video-loop.jpg",
    "sources": [
      {
        "src": "/images/sample-video-loop.webm",
        "type": "webm"
      },
      {
        "src": "/images/sample-video-loop.mp4",
        "type": "mp4"
      }
    ],
    "alt": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla sequi pariatur itaque."
  }
}