videobannercode

{% if section.settings.video  %}
{%- 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.cover_image
     assign poster =  section.settings.cover_image
  endif
  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
-%}
<video playsinline autoplay muted loop poster="{{ poster | image_url: width: 3840 }}" style="width: 100%; height: 100%; object-fit: cover;" id="video-{{ section.id }}">
    <source src="{{ section.settings.video.sources[1].url }}" type="video/mp4">
    Your browser does not support the video tag.
</video>

      <style>
        div#shopify-section-template--16108370624665__6a9abf06-1dde-4645-9360-ddbb03a13b7b {
    display: flex;
    align-items: center;
}

        </style>
<script>
  function getDivDimensionsByClassMakka(className, ratio) {
    var elements = document.querySelector(className)

    if (elements) {
        var width = elements.offsetWidth;
        var height = width / ratio;

        return { width: width, height: height };
    } else {
        // Handle the case where no element with the specified class is found
        console.error("No element found with class: " + className);
        return null;
    }
}

// Example usage with a ratio of 1.75
  var ratio = {{ section.settings.video.aspect_ratio }};
  var dimensions = getDivDimensionsByClassMakka("#video-{{ section.id }}", ratio);

  if (dimensions) {
      document.querySelector('#video-{{ section.id }}').style.minHeight = `${Math.round(dimensions.height - 10)}px`
  }

  window.onresize = function(){
    var dimensions = getDivDimensionsByClassMakka("#video-{{ section.id }}", ratio);
    if (dimensions) {
        document.querySelector('#video-{{ section.id }}').style.minHeight = `${Math.round(dimensions.height)}px`
    }
  };
</script>


{% endif %}
{% schema %}
  {
    "name": "Full Width Video",
    "settings": [
      {
        "type": "image_picker",
        "id": "cover_image",
        "label": "t:sections.video.settings.cover_image.label"
      },
      {
        "type": "video",
        "id": "video",
        "label": "Video"
      }
    ],
    "presets": [
      {
        "name": "Full Width Video"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}