---
section_classes: "px-5 py-11"
---
{{#
/**
 * @name banner/title-video
 * @description A partial for a banner with a title, copy, and image
 * @property {string} banner_title - Banner title
 * @property {string} video_wistia_id - Wistia video id
 * @property {string} [video_thumbnail] - Wistia video thumbnail
 * @property {string} [banner_description]
 * @property {string} [section_classes="px-5 py-11 l--py-6"] - Classes applied to the wrapping `section`
 */
#}}
<section class="{{ section_classes }}">
  <div class="mw-32 m--mw-grid mx-auto m--grid m--g-cols m--gap-m m--ai-center">
    <div class="m--g-col-5">
      <h2 class="title-3 mb-4 m--mt-0">{{ banner_title }}</h2>
      {{ if banner_description }}
        <p class="body-3 m--mb-0">{{ banner_description }}</p>
      {{ /if }}
    </div>
    <div class="relative m--g-col-6 m--g-start-6 m--h-100">
      <div class="bg-ocean-40 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/{{ 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_{{ 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/{{ 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: "{{ video_wistia_id }}",
            options: {
              "stillUrl": "{{ video_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>
  </div>
</section>