Video¶

The video macro is used to render a video module for either youtube video or self-hosted video.

Definition¶

{% video(src, options) %}

Input parameters¶

src¶

url an absolute or relative link to video file that will be rendered.

options¶

object represents an object of rates filter options and attributes

Option key	Type	Default	Required	Description
options.video_settings	`object`	null	yes	A key value object with additioanl video settings necessary for the rendering of the chosen video

options.video_settings¶

object represents an object of slider configuration options

Option key	Type	Default	Required	Description
options.video_settings.video_type	`radio`	`youtube`	yes	depending if set to `youtube` or `self-hosted` a youtube iframe or video tag is rendered
options.video_settings.posterSrc	`string`	false	no	The source of the poster image.
options.video_settings.videoDescription	`string`	`""`	no	Video description read by screen readers.
options.video_settings.autoplay	`boolean`	`true`	no	If set to `true` the video will be played automatically.
options.video_settings.muted	`boolean`	`true`	no	If set to `true` the video wil be muted initially. Set to `true` if `autoplay` is true as well
options.video_settings.controls	`boolean`	`true`	no	If set to `true` the video will have controls visible.
options.video_settings.loop	`boolean`	`true`	no	If set to `true` the video will be replayed after it ends.
options.video_settings.aspectRatio	`select`	`16/9`	no	Either `16/9`, `9/16` , `4/3` or `1/1` - only for `youtube` videos. Sets video container dimensions.
options.video_settings.captionTrackLink	`string`	null	no	Url to the file with captions. Only for `self-hosted` videos.
options.video_settings.captionLang	`string`	`pl`	no	Locale (e.g. `pl`, `en`) of the captions. By default set to the shop language.
options.video_settings.audioDescriptionTrackLink	`string`	null	no	Url to the file with audio-description file.
options.video_settings.audioDescriptionLang	`string`	`pl`	no	Locale (e.g. `pl`, `en`) of the audio-description. By default set to the shop language.
options.video_settings.transcriptTrackLink	`string`	null	no	Url to the file with transcription for the video (only for self-hosted videos).

Example¶

In this example we render a basic video

{% from "@macros/video.twig" import video %}

{% set src = moduleConfig.videoType == 'self-hosted' ? moduleConfig.ownVideoLink : moduleConfig.youtubeVideoLink %}
{% set autoplay = moduleConfig.autoplay %}
{% set controls = moduleConfig.videoType == 'self-hosted' ? moduleConfig.vidControls : moduleConfig.controls %}
{% set muted = moduleConfig.vidMuted %}
{% set loop = moduleConfig.vidLoop %} 

{% set locale = ObjectApi.getShopLocale() %}
{% set currentLanguage =  locale.locale|split('_')[0] %}

{% set video_settings = {
    video_type: moduleConfig.videoType,
    posterSrc: moduleConfig.addPosterImage ? moduleConfig.posterImage.paths.original : "",
    videoDescription: moduleConfig.videoDescription,
    autoplay: autoplay == '1',
    controls: controls == '1',
    muted: muted == '1',
    loop: loop == '1',
    aspectRatio: moduleConfig.youtubeAspectRatio|default('16/9'),
    captionTrackLink: moduleConfig.captionTrackLink,
    captionLang: currentLanguage,
    audioDescriptionTrackLink: moduleConfig.audioDescriptionTrackLink,
    audioDescriptionLang: currentLanguage,
    transcriptTrackLink: moduleConfig.transcriptTrackLink
} %} 

{{ video(src, video_settings|merge({ moduleInstanceId: moduleInstance })) }}

Macro source code¶

{% macro video(src, options) %}

    {% if options.video_type == 'self-hosted' %}

        <h-video
            src="{{ src }}"
            instance-id="{{ options.instanceId }}"
            settings="{{ options|json_encode|e('html_attr') }}"
        >
        </h-video>

    {% elseif options.video_type == 'youtube' %}

        <h-yt-video
            src="{{ src }}"
            instance-id="{{ options.instanceId }}"
            settings="{{ options|json_encode|e('html_attr') }}"
        >
        </h-yt-video>

    {% endif %}

{% endmacro %}