video.liquid

{% assign extension = include.path | split: '.' | last %}

<figure>
  {% if extension == 'mp4' or extension == 'webm' or extension == 'ogg' %}
    <video
      src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
      {% if include.class %}
        class="{{ include.class }}"
      {% endif %}
      {% if include.width %}
        width="{{ include.width }}"
      {% else %}
        width="auto"
      {% endif %}
      {% if include.height %}
        height="{{ include.height }}"
      {% else %}
        height="auto"
      {% endif %}
      {% if include['min-width'] %}
        min-width="{{ include.min-width }}"
      {% endif %}
      {% if include['min-height'] %}
        min-height="{{ include.min-height }}"
      {% endif %}
      {% if include['max-width'] %}
        max-width="{{ include.max-width }}"
      {% endif %}
      {% if include['max-height'] %}
        height="{{ include.max-height }}"
      {% endif %}
      {% if include.title %}
        title="{{ include.title }}"
      {% endif %}
      {% if include.alt %}
        alt="{{ include.alt }}"
      {% endif %}
      {% if include.autoplay %}
        autoplay
      {% endif %}
      {% if include.controls %}
        controls
      {% endif %}
      {% if include.loop %}
        loop
      {% endif %}
      {% if include.muted %}
        muted
      {% endif %}
      {% if include.poster %}
        poster="{{ include.poster }}"
      {% endif %}
    />

  {% else %}
    <iframe
      src="{{ include.path }}"
      {% if include.class %}
        class="{{ include.class }}"
      {% endif %}
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
      {% if include.width %}
        width="{{ include.width }}"
      {% else %}
        width="auto"
      {% endif %}
      {% if include.height %}
        height="{{ include.height }}"
      {% else %}
        height="auto"
      {% endif %}
      {% if include['min-width'] %}
        min-width="{{ include.min-width }}"
      {% endif %}
      {% if include['min-height'] %}
        min-height="{{ include.min-height }}"
      {% endif %}
      {% if include['max-width'] %}
        max-width="{{ include.max-width }}"
      {% endif %}
      {% if include['max-height'] %}
        height="{{ include.max-height }}"
      {% endif %}
      {% if include.alt %}
        alt="{{ include.alt }}"
      {% endif %}
      {% if include.title %}
        title="{{ include.title }}"
      {% endif %}
    />
  {% endif %}
  {% if include.caption %}
    <figcaption class="caption">{{ include.caption }}</figcaption>
  {% endif %}
</figure>