{% assign src = include.video.src | include.video.path | default:include.video %}
{% assign poster = include.video.poster | default:include.poster %}

<media-controller>
    <video
      slot="media"
      src="{% include_cached smart-url url=src %}"
      {% if poster %}poster="{% include_cached smart-url url=poster %}"{% endif %}
      {% if include.video.class %}class="{{ include.video.class }}"{% endif %}
      {% if include.video.property %}property="{{ include.video.property }}"{% endif %}
      {% if include.video.width %}width="{{ include.video.width }}"{% endif %}
      {% if include.video.height %}height="{{ include.video.height }}"{% endif %}
      {% if include.video.width and include.video.height %}loading="lazy"{% endif %}
      {% if include.video.autoplay %}autoplay{% endif %}
      {% if include.video.loop %}loop{% endif %}
      {% if include.video.muted %}muted{% endif %}
      {% if include.video.preload %}preload="{{ include.video.preload }}"{% endif %}
      {% if include.video.crossorigin %}crossorigin="{{ include.video.crossorigin }}"{% endif %}
    ></video>
        <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
        <media-control-bar>
          <media-play-button></media-play-button>
          <media-mute-button></media-mute-button>
          <media-volume-range></media-volume-range>
          <media-time-display></media-time-display>
          <media-time-range></media-time-range>
          <media-duration-display></media-duration-display>
          <media-playback-rate-button></media-playback-rate-button>
          <media-fullscreen-button></media-fullscreen-button>
        </media-control-bar>
  </media-controller>