---
video:
  type: 'hash'
poster:
  type: 'hash'
  default:
    path: null
    description: ''
controls:
  type: 'bool'
  default: true
captions:
  type: 'array'
  default: []
class:
  type: 'string'
  default: 'img-fluid'
not_supported:
  type: 'hash'
  default:
    es: 'Tu navegador no soporta este formato de video, puedes descargarlo aquí:'
    en: "Your browser doesn't support this video's format, you can download it here:"
    ar: "متصفحك لا يدعم تنسيق هذا الفيديو، يمكنك تنزيله من هنا:"
---
<video
  preload="metadata"
  loading="lazy"
  class="{{ class }}"
  {{ controls | value_if: 'controls' }}
  {% if poster.path %}
    poster="{{ poster.path | component_escape }}"
  {% endif %}
>
  <source src="{{ video.path | component_escape }}">

  <p>
    <a href="{{ video.path | component_escape }}" download>
      {{- not_supported[locale] -}}
    </a>
  </p>

  {%- for caption in captions -%}
    <track kind="captions" label="{{ caption.description }}" src="{{ caption.path | component_escape }}">
    <p>
      <a href="{{ caption.path | component_escape }}" download>{{ caption.description }}</a>
    </p>
  {%- endfor -%}
</video>