{% schema %}
{
  "name": "Video Banner",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Our Technology"
    },
    {
      "type": "url",
      "id": "video_url",
      "label": "MP4 Video URL"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Autoplay",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "muted",
      "label": "Muted",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "loop",
      "label": "Loop",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "controls",
      "label": "Show Controls",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Video Banner",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<section class="video-banner">
  <div class="page-width">
    {% if section.settings.heading != blank %}
      <h2 class="video-heading">{{ section.settings.heading }}</h2>
    {% endif %}

    {% if section.settings.video_url != blank %}
      <video 
        class="video-banner-player"
        {% if section.settings.autoplay %} autoplay {% endif %}
        {% if section.settings.muted %} muted {% endif %}
        {% if section.settings.loop %} loop {% endif %}
        {% if section.settings.controls %} controls {% endif %}
        playsinline
      >
        <source src="{{ section.settings.video_url }}" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    {% endif %}
  </div>
</section>

<style>
.video-banner {
  text-align: center;
  padding: 40px 20px;
}
.video-heading {
  color: #000;
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: bold;
}
.video-banner-player {
  max-width: 100%;
}
</style>