video_tag

media | video_tag

Generates an HTML <video> tag for a given video.

Note

When mp4 videos are uploaded, Shopify generates an m3u8 file as an additional video_source. An m3u8 file enables video players to leverage HTTP live streaming (HLS), resulting in an optimized video experience based on the user's internet connection. If loop is enabled, the HLS source is not used in order to allow progessive download to cache the video.

If the m3u8 source isn't supported, then the player falls back to the mp4 source.

{% for media in product.media %}

{% if media.media_type == 'video' %}

{% endif %}

{% endfor %}

Code

{% for media in product.media %}
  {% if media.media_type == 'video' %}
    {{ media | video_tag }}
  {% endif %}
{% endfor %}

Data

{
  "product": {
    "media": [
      {
        "media_type": "external_video"
      },
      {
        "media_type": "video"
      }
    ]
  }
}

Output

Output

<video playsinline="playsinline" preload="metadata" aria-label="Potion beats" poster="//polinas-potent-potions.myshopify.com/cdn/shop/products/4edc28a708b7405093a927cebe794f1a.thumbnail.0000000_small.jpg?v=1655255324"><source src="//polinas-potent-potions.myshopify.com/cdn/shop/videos/c/vp/4edc28a708b7405093a927cebe794f1a/4edc28a708b7405093a927cebe794f1a.HD-1080p-7.2Mbps.mp4?v=0" type="video/mp4"><img src="//polinas-potent-potions.myshopify.com/cdn/shop/products/4edc28a708b7405093a927cebe794f1a.thumbnail.0000000_small.jpg?v=1655255324"></video>

Rendered output

Anchor to Lazy loading

Lazy loading

If you don't pass the loading attribute to video_tag, then loading is automatically set to lazy for videos in sections further down the page. You shouldn't lazy load videos above the fold. If the default value doesn't work for your theme, then consider writing your own logic using the section.index and section.location properties. For more information, refer to the section object.

Anchor to image_size

image_size

media | video_tag: image_size: string

Specify the dimensions of the video's poster image in pixels.

{% for media in product.media %}

{% if media.media_type == 'video' %}

{% endif %}

{% endfor %}

Code

{% for media in product.media %}
  {% if media.media_type == 'video' %}
    {{ media | video_tag: image_size: '400x' }}
  {% endif %}
{% endfor %}

Data

{
  "product": {
    "media": [
      {
        "media_type": "external_video"
      },
      {
        "media_type": "video"
      }
    ]
  }
}

Output

Output

<video playsinline="playsinline" preload="metadata" aria-label="Potion beats" poster="//polinas-potent-potions.myshopify.com/cdn/shop/products/4edc28a708b7405093a927cebe794f1a.thumbnail.0000000_400x.jpg?v=1655255324"><source src="//polinas-potent-potions.myshopify.com/cdn/shop/videos/c/vp/4edc28a708b7405093a927cebe794f1a/4edc28a708b7405093a927cebe794f1a.HD-1080p-7.2Mbps.mp4?v=0" type="video/mp4"><img src="//polinas-potent-potions.myshopify.com/cdn/shop/products/4edc28a708b7405093a927cebe794f1a.thumbnail.0000000_400x.jpg?v=1655255324"></video>

Rendered output

Anchor to Optional supported HTML5 attributes

Optional supported HTML5 attributes

media | video_tag: attribute: boolean

video_tag supports all HTML5 video attributes. For example:

Attribute	Value
`autoplay`	Whether to automatically play the video after it’s loaded. Accepted values:`true`,`false`
`loop`	Whether to loop the video. Accepted values:`true`,`false`
`muted`	Whether to mute the video’s audio. Accepted values:`true`,`false`
`controls`	Whether a user can control the video playback. Accepted values:`true`,`false`
`loading`	Whether to lazy-load the video. Accepted values:`lazy`,`eager`

{% for media in product.media %}

{% if media.media_type == 'video' %}

{{ media | video_tag: autoplay: true, loop: true, muted: true, controls: true }}

{% endif %}

{% endfor %}

Code

{% for media in product.media %}
  {% if media.media_type == 'video' %}
    {{ media | video_tag: autoplay: true, loop: true, muted: true, controls: true }}
  {% endif %}
{% endfor %}

Data

{
  "product": {
    "media": [
      {
        "media_type": "external_video"
      },
      {
        "media_type": "video"
      }
    ]
  }
}

Output

Output

<video playsinline="playsinline" autoplay="autoplay" loop="loop" muted="muted" controls="controls" preload="metadata" aria-label="Potion beats" poster="//polinas-potent-potions.myshopify.com/cdn/shop/products/4edc28a708b7405093a927cebe794f1a.thumbnail.0000000_small.jpg?v=1655255324"><source src="//polinas-potent-potions.myshopify.com/cdn/shop/videos/c/vp/4edc28a708b7405093a927cebe794f1a/4edc28a708b7405093a927cebe794f1a.HD-1080p-7.2Mbps.mp4?v=0" type="video/mp4"><img src="//polinas-potent-potions.myshopify.com/cdn/shop/products/4edc28a708b7405093a927cebe794f1a.thumbnail.0000000_small.jpg?v=1655255324"></video>

Rendered output

Was this page helpful?