Twig usage

Basic rendering

Iterate all variants to build a <video> element with multiple sources:

{% set video = entry.heroVideo %}

{% if video and video.hasVariants %}
  <video controls>
    {% for variant in video.variants %}
      <source src="{{ variant.url }}" type="{{ variant.mimeType }}">
    {% endfor %}
  </video>
{% endif %}

Access a specific variant

Use variant(handle) to target a specific preset by its handle:

{% set vp9 = entry.heroVideo.variant('hero-vp9-720p') %}
{% if vp9 %}
  <video src="{{ vp9.url }}" muted autoplay loop playsinline></video>
{% endif %}

Poster image (<video poster>)

Each variant stores a poster JPEG captured from its first frame. Use variant.thumbnailUrl directly, or variant.thumbnail for the full Craft Asset element (which supports image transforms):

{% set variant = entry.heroVideo.variant('hero-h264-720p') %}
{% if variant %}
  <video
    poster="{{ variant.thumbnailUrl }}"
    muted autoplay loop playsinline
  >
    <source src="{{ variant.url }}" type="{{ variant.mimeType }}">
  </video>
{% endif %}

With a Craft image transform on the poster:

poster="{{ variant.thumbnail.getUrl({ width: 1280 }) }}"

Original source file

If Keep source is enabled on the field, the original untranscoded file is also available:

{{ entry.heroVideo.source.url }}