{% liquid
  assign autoplay = 0
  assign loop = 0
  assign mute = 0
  if is_autoplay
    assign autoplay = 1
    assign mute = 1
  endif

  if is_loop
    assign loop = 1
  endif
%}

<noscript>
  <div
    class="video-section__media"
    {% if cover_image != blank %}
      style="padding-bottom: {{ 1 | divided_by: cover_image.aspect_ratio | times: 100 }}%;"
    {% endif %}
  >
    <a
      href="{{ video_url }}"
      class="video-section__poster media media--transparent media--landscape{% if cover_image == blank %} video-section__placeholder{% endif %}"
    >
      {%- if cover_image != blank -%}
        <img
          srcset="
            {%- if cover_image.width >= 375 -%}{{ cover_image | image_url: width: 375 }} 375w,{%- endif -%}
            {%- if cover_image.width >= 750 -%}{{ cover_image | image_url: width: 750 }} 750w,{%- endif -%}
            {%- if cover_image.width >= 1100 -%}{{ cover_image | image_url: width: 1100 }} 1100w,{%- endif -%}
            {%- if cover_image.width >= 1500 -%}{{ cover_image | image_url: width: 1500 }} 1500w,{%- endif -%}
            {%- if cover_image.width >= 1780 -%}{{ cover_image | image_url: width: 1780 }} 1780w,{%- endif -%}
            {%- if cover_image.width >= 2000 -%}{{ cover_image | image_url: width: 2000 }} 2000w,{%- endif -%}
            {%- if cover_image.width >= 3000 -%}{{ cover_image | image_url: width: 3000 }} 3000w,{%- endif -%}
            {%- if cover_image.width >= 3840 -%}{{ cover_image | image_url: width: 3840 }} 3840w,{%- endif -%}
            {{ cover_image | image_url }} {{ cover_image.width }}w
          "
          src="{{ cover_image | image_url: width: 1920 }}"
          sizes="{% if full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
          alt="{{ 'sections.video.load_video' | t: description: description | escape }}"
          loading="lazy"
          width="{{ cover_image.width }}"
          height="{{ cover_image.height }}"
        >
      {%- else -%}
        {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
      {%- endif -%}
    </a>
  </div>
</noscript>
<div
  class="video-section__media gradient global-media-settings{% if full_width %} global-media-settings--full-width{% endif %}"
  style="padding-bottom: {{ 1 | divided_by: cover_image.aspect_ratio | times: 100 }}%;"
>
  <iframe
    width="100%"
    height="100%"
    src="https://www.youtube.com/embed/{{ video_url_id }}?autoplay={{ autoplay }}&mute={{ mute }}&loop={{ loop }}&playlist={{ video_url_id }}&rel=0&modestbranding=0&controls=1"
    frameborder="0"
    allow="autoplay; encrypted-media"
    allowfullscreen
    title="{{ description | escape }}"
  >
  </iframe>
</div>