---
section_classes: "m--px-5 pt-11 m--pt-12"
bg_color: "ocean"
headline_color: "white"
headline_classes: "title-2 ta-center m--title-3 l--title-5 l--mb-6 mt-0"
description_classes: "body-3 ta-center fw-500 mb-8 m--px-8 l--px-12 l--body-5 l--mb-9"
video_shadow_classes: ""
---
{{#
/**
 * @name block/billboard-video
 * @todo Document property vars/partial
 */
#}}
<section class="bg-{{ bg_color }} {{ section_classes }} bg-bottom bg-contain" {{ if bg_color=='mint' }}style="background-image: url('{{ theme:asset src="images/backgrounds/mint-wave.svg" }}')"{{ /if }}>
  <div class="mw-32 mx-auto m--mw-grid px-5 m--px-0">
    <h2 class="{{ headline_color }} {{ headline_classes }}">{{ billboard_video_headline | widont }}</h2>
    {{ if billboard_video_description }}<p class="{{ description_color or headline_color }} {{ description_classes }}">{{ billboard_video_description | widont }}</p>{{ /if }}
  </div>
  {{ if billboard_video_wistia }}
    <div class="pt-6 pb-11 mw-grid mx-auto ov-hidden grid g-cols">
      <div class="bg-{{ bg_color }} g-start-1 g-col-10 m--g-start-2 m--g-col-8 br-2 ov-hidden bs-very-soft relative">
        <img src="{{ theme:asset src='images/play-button.svg' }}" class="bs-button bs-hover br-circle center-xy absolute z-1" id="acPlayBtn">
        <script src="https://fast.wistia.com/embed/medias/{{ billboard_video_wistia_id }}.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_{{ billboard_video_wistia_id }} controlsVisibleOnLoad=false playButton=false videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/{{ billboard_video_wistia_id }}/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>
        <script>
          // Wistia customization code
          window._wq = window._wq || [];
          _wq.push({
            id: "{{ billboard_video_wistia_id }}",
            options: {
              "stillUrl": "{{ billboard_video_wistia_thumbnail }}"
            },
            onReady: function(video) {
            var acPlayBtn = document.getElementById('acPlayBtn');
            video.bind("end", function() {
              acPlayBtn.classList.remove('none')
            });
            video.bind("pause", function() {
              acPlayBtn.classList.remove('none')
            });
            video.bind("play", function() {
              acPlayBtn.classList.add('none')
            });
            acPlayBtn.addEventListener('click', function(){
              video.play();
              acPlayBtn.classList += ' none';
            });
          }});
          // End Wistia script
        </script>
      </div>
    </div>
  {{ else }}
    <div class="mw-grid mx-auto ov-hidden m--grid m--g-cols">
      <div class="none br-top-2 bg-white {{ video_shadow_classes }} g-col-10 g-start-1 m--block">
        <img src="{{ theme:asset src='images/browser-top.svg' }}" class="va-bottom">
      </div>
      <div class="m--g-col-10 m--g-start-1 {{ video_shadow_classes }}">
        <video autoplay="" muted="" class="w-100 va-bottom" poster="{{ billboard_video_poster }}">
          {{ billboard_video_assets }}
            <source src="{{ value }}">
          {{ /billboard_video_assets }}
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
  {{ /if }}
</section>