Hero Video (with fallback image)

index-hero.liquid

<div class="video-holder">
  <video autoplay muted loop playsinline poster="{{ section.settings.image | img_url: '2000x', scale: 2 }}">
    {% unless section.settings.video-mp4 == blank %}<source src="{{ section.settings.video-mp4 }}" type="video/mp4" />{% endunless %}
    {% unless section.settings.video-ogg == blank %}<source src="{{ section.settings.video-ogg }}" type="video/ogg" />{% endunless %}
    <img src="{{ section.settings.image | img_url: '2000x', scale: 2 }}" />
  </video>
</div>

<div class="overlay"></div>
<div class="hero-content">
  <h1>{{ section.settings.heading }}</h1>
  <h2>{{ section.settings.subheading }}</h2>
  <a class="button alt" href="{{ section.settings.url }}">{{ section.settings.cta }}</a>
</div>

<div class="control pause">
  <span class="left"></span><span class="right"></span>
</div>

{% schema %}
  {
    "name": "Hero",
    "class": "index-hero",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "paragraph",
        "content": "You can upload your video files to [Settings > Files](/admin/settings/files) and paste in the URLs below."
      },
      {
        "type": "text",
        "id": "video-mp4",
        "label": "Video URL (MP4)"
      },
      {
        "type": "text",
        "id": "video-ogg",
        "label": "Video URL (OGG)"
      },
      {
        "type": "text",
        "id": "heading",
        "label": "Heading"
      },
      {
        "type": "text",
        "id": "subheading",
        "label": "Subheading"
      },
      {
        "type": "text",
        "id": "cta",
        "label": "Button Text"
      },
      {
        "type": "url",
        "id": "url",
        "label": "Button Link"
      }
    ],
    "presets": [
      {
        "category": "Sections",
        "name": "Hero"
      }
    ]
  }
{% endschema %}

index.js

// Hero play/pause
$('.control').on('mousedown', function() {
  $(this).toggleClass('pause play');
  if ($('video').get(0).paused == false) {
    $('video')
      .get(0)
      .pause();
  } else {
    $('video')
      .get(0)
      .play();
  }
});

index.scss

.index-hero {
  position: relative;
  img {
    width: 100%;
  }
  .video-holder {
    position: relative;
    height: 0;
    padding-top: 48%;
    overflow: hidden;
    @media (max-width: 865px) {
      padding-top: 56%;
    }
  }
  video {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    width: 100vw;
    @include prefix(transform, translateY(-50%), webkit spec);
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
  }
  .hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    @include prefix(transform, translate(-50%, -50%), webkit spec);
    width: 100%;
    max-width: 920px;
    text-align: center;
    padding: 0 20px;
  }
  h1 {
    text-transform: initial;
    color: #ffffff;
    font-size: 6.5rem;
    font-weight: 500;
    margin: 0 auto 30px;
  }
  h2 {
    color: #ffffff;
    font-weight: 500;
    font-size: 2.5rem;
    max-width: 605px;
    margin: 0 auto 30px;
    line-height: 3.12rem;
  }
  .control {
    $color: #ffffff;
    $highlight: darken($color, 10%);
    $duration: 0.4s;
    $sin: 0.866;
    $size: 40px;
    position: absolute;
    z-index: 10;
    right: 10px;
    bottom: 0;
    box-sizing: content-box;
    width: $size;
    height: $size;
    margin: 0 0 10px;
    padding: $size * 0.25;
    border: $size * 0.1 solid $color;
    border-radius: 50%;
    opacity: 0.1;
    font-size: 0;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
    &,
    .left,
    .right,
    &::before {
      display: inline-block;
      vertical-align: middle;
      transition: border $duration, width $duration, height $duration,
        margin $duration, opacity $duration;

      // transition-tiig-function: cubic-bezier(1, 0, 0, 1);
    }

    &::before {
      content: "";
      height: $size;
    }

    &.pause {
      .left,
      .right {
        height: $size * $sin;
        margin: 0;
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
        border-left: $size * 0.33 solid $color;
      }

      .left {
        border-right: $size * 0.2 solid transparent;
      }
    }

    &.play {
      $border: $size/4;

      .left {
        height: $size;
        margin-left: $size/6;
        border-top: $border solid transparent;
        border-right: 0 solid transparent;
        border-bottom: $border solid transparent;
        border-left: $size * $sin/2 solid $color;
      }

      .right {
        height: 0;
        margin: 0;
        border-top: $border solid transparent;
        border-bottom: $border solid transparent;
        border-left: $size * $sin/2 solid $color;
      }
    }

    &:hover {
      border-color: $highlight;

      .left,
      .right {
        border-left-color: $highlight;
      }
    }

    @media (max-width: 600px) {
      width: 28px;
      height: 28px;
      padding: 28px * 0.25;
      border: 28px * 0.1 solid $color;
      &::before {
        height: 28px;
      }
      &.pause {
        .left,
        .right {
          height: 24.248px;
          border-left: 9.24px solid $color;
        }
        .left {
          border-right: 5.6px solid transparent;
        }
      }
      &.play {
        $border: 28px/4;
        .left {
          height: 28px;
          margin-left: 0;
          border-left: 12.124px solid $color;
        }
        .right {
          height: 0;
          margin: -6.5px;
          border-left: 12.124px solid $color;
        }
      }
    }
  }
  @media (max-width: 1000px) {
    h1 {
      font-size: 5rem;
    }
    h2 {
      font-size: 2.2rem;
    }
  }
  @media (max-width: 865px) {
    position: relative;
    overflow: hidden;

    // min-height: 400px;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: auto;
      max-width: initial;
      height: 100%;
      @include prefix(transform, translate(-50%, -50%), webkit spec);
    }
    h1 {
      font-size: 4rem;
    }
  }
  @media (max-width: 600px) {
    // min-height: 300px;
    h1 {
      font-size: 3.5rem;
    }
    h2 {
      font-size: 2rem;
      line-height: 2.6rem;
    }
  }
  @media (max-width: 400px) {
    // min-height: 260px;
    h1 {
      font-size: 2.4rem;
      font-weight: 600;
      margin: 0 auto 20px;
    }
    h2 {
      font-size: 1.6rem;
      margin: 0 auto 20px;
    }
  }
}