external_video_tag

variable | external_video_tag

Generates an HTML <iframe> tag containing the player for a given external video. The input for the external_video_tag filter can be either a media object or external_video_url.

If alt text is set on the video, then it's included in the title attribute of the <iframe>. If no alt text is set, then the title attribute is set to the product title.

{% for media in product.media %}

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

{% if media.host == 'youtube' %}

{{ media | external_video_url: color: 'white' | external_video_tag }}

{% elsif media.host == 'vimeo' %}

{{ media | external_video_url: loop: '1', muted: '1' | external_video_tag }}

{% endif %}

{% endfor %}

{% for media in product.media %}
  {% if media.media_type == 'external_video' %}
    {% if media.host == 'youtube' %}
      {{ media | external_video_url: color: 'white' | external_video_tag }}
    {% elsif media.host == 'vimeo' %}
      {{ media | external_video_url: loop: '1', muted: '1' | external_video_tag }}
    {% endif %}
  {% endif %}
{% endfor %}

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

Output

HTML attributes

variable | external_video_tag: attribute: string

You can specify HTML attributes by adding a parameter that matches the attribute name, and the desired value.