video Function

Renders a video player from a video resource, which can be selected by a seller via the video-chooser control.

video Function Signature

video(first, second) signature:

Argument Required? Schema
first required video resource schema
second optional video options (see below)

Video Options

Video options is an object with the following properties:

Property Required? Type Description Default
controls optional boolean if true renders video player with controls false
autoplay optional boolean if true the video player autoplays the video muted false
muted optional boolean if true the video will be muted false
loop optional boolean if true the video will loop false
aspectRatio optional /^[1-9][0-9]*:[1-9][0-9]*$/ renders video player in given aspect ratio 16:9

Examples

Simple

Renders a video player with 16:9 aspect ratio and controls. The video player will expand to fill all available space in its parent while maintaining its aspect ratio.

{{ video(myVideo) }}

{% schema %}
{
    "myVideo": {
        "type": "video",
        "optional": true
    }
}
{% endschema %}

{% editor %}
{
    "name": "template controls",
    "controls": [
        {
            "control": "video-chooser",
            "value": {
                "$ref": "#/schema/myVideo"
            }
        }
    ]
}
{% endeditor %}

Using options

Renders a video player with 4:3 aspect ratio, without controls, that autoplays and loops the video while it is muted.

{{ video(myVideo, { aspectRatio: "4:3", controls: false, autoplay: true, muted: true, loop: true }) }}

{% schema %}
{
    "myVideo": {
        "type": "video",
        "optional": true
    }
}
{% endschema %}

{% editor %}
{
    "name": "template controls",
    "controls": [
        {
            "control": "video-chooser",
            "value": {
                "$ref": "#/schema/myVideo"
            }
        }
    ]
}
{% endeditor %}

Adjusting video player size

Since the video play expands to fill its parent, you can control its size by controlling the parent’s size, like so:

<!-- video player will be limited to 500px -->
<div style="width: 500px; height: 500px;">
    {{ video(myVideo) }}
</div>

{% schema %}
{
    "myVideo": {
        "type": "video",
        "optional": true
    }
}
{% endschema %}

{% editor %}
{
    "name": "template controls",
    "controls": [
        {
            "control": "video-chooser",
            "value": {
                "$ref": "#/schema/myVideo"
            }
        }
    ]
}
{% endeditor %}

See also