/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'video-section.css'"
Line 17:0 Unexpected "{"
Line 17:1 Unexpected "{"
Line 17:3 Expected identifier but found "'component-deferred-media.css'"
Line 19:0 Unexpected "{"
Line 19:1 Expected identifier but found "%"
Line 20:12 Unexpected "{"
Line 20:21 Expected ":"
... and 31 more hidden warnings

**/
{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .video-section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .video-section__media {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .video-section__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media screen and (max-width: 749px) {
    .video-section__media {
      height: auto;
    }

    .video-section__media video {
      object-fit: contain;
      height: auto;
      width: 100%;
      position: relative;
    }
  }
{%- endstyle -%}

{%- liquid
  assign video_id = section.settings.video.id | default: section.settings.video_url.id
  assign video_alt = section.settings.video.alt | default: section.settings.description
  assign alt = 'sections.video.load_video' | t: description: video_alt | escape
  assign poster = section.settings.video.preview_image | default: section.settings.cover_image

  if section.settings.video != null
    assign ratio_diff = section.settings.video.aspect_ratio | minus: poster.aspect_ratio | abs
    if ratio_diff < 0.01 and ratio_diff > 0
      assign fix_ratio = true
    endif
  endif
-%}

<!-- Basic video hero section -->
<div class="video-section isolate section-{{ section.id }}-padding">
  <div class="video-section__media">
    {{
      section.settings.video
      | video_tag:
          image_size: '1100x',
          autoplay: true,
          loop: section.settings.enable_video_looping,
          controls: false,
          muted: true,
          playsinline: true
    }}
  </div>
</div>

{% schema %}
{
  "name": "Video Hero",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "video",
      "id": "video",
      "label": "Video upload"
    },
    {
      "type": "video_url",
      "id": "video_url",
      "accept": ["youtube", "vimeo"],
      "label": "Video URL",
      "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
    },
    {
      "type": "image_picker",
      "id": "cover_image",
      "label": "Cover image"
    },
    {
      "type": "text",
      "id": "description",
      "label": "Alt text"
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "label": "Loop video",
      "default": false
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme-1"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "Video Hero"
    }
  ]
}
{% endschema %}