Video¶
Availability: All contexts
Video module is used to display a self-hosted or YouTube video. It uses <h-video> or <h-yt-video> webcomponents to render appropriate video, depending on the type of video.
Configuration parameters¶
The module uses an extensive set of configuration parameters defined in the JSON schema, grouped into "General settings" and "Accessibility".
videoType¶
radio Location of the video file (youtube or self-hosted). Controls visibility of other link/control settings.
ownVideoLink¶
text Link to self-hosted video file (https:// or /). - Visible only if videoType is self-hosted.
youtubeVideoLink¶
text Link to YouTube video. - Visible only if videoType is youtube.
youtubeAspectRatio¶
select Aspect ratio for YouTube video display. Visible only if videoType is youtube.
captionTrackLink¶
text Link to self-hosted captions file (*.vtt). - Visible only if videoType is self-hosted.
autoplay¶
If set to 1, the video will start automatically. Autostart automatically sets vidMuted to 1 and disables the control (required for EAA Directive compliance).
vidMuted¶
If set to 1 mutes the video.
vidControls¶
If set to 1 displays video player controls (for self-hosted). Visible only if videoType is self-hosted.
controls¶
If set to 1 displays video player controls (for YouTube). Visible only if videoType is youtube.
vidLoop¶
If set to 1, Loop video playback (for self-hosted). 1 Visible only if videoType is self-hosted.
addPosterImage¶
If set to 1 allows to add a cover image for videos that don't autoplay. Visible only if videoType is self-hosted.
posterImage¶
imageUpload Image file for the video cover.
videoDescription¶
textarea (optional) Description for screen readers.
transcriptTrackLink¶
text (optional) Link to transcript file.
audioDescriptionTrackLink¶
text (optional) Link to audio description file. - Visible only if videoType is self-hosted.
Module source code¶
{% 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({ instanceId: moduleInstance })) }}
Macros reference¶
Webcomponents reference¶
Used styles¶
Module configuration schema¶
[
{
"label": "General settings",
"state": "unfolded",
"elements": [
{
"type": "infobox",
"name": "infobox",
"options": {
"type": "blank",
"message": "#### Where to upload the video file?%s - [YouTube](%s) service, %s - Your own server - you can use your Shoper store server ([file upload instructions](%s)). %s",
"placeholderValues": [
"\n",
"https://www.youtube.com/upload",
"\n",
"https://www.shoper.pl/learn/artykul/umieszczenie-pliku-do-pobrania-w-sklepie",
"\n"
]
}
},
{
"type": "radio",
"name": "videoType",
"label": "Video file location",
"defaultValue": "youtube",
"options": {
"radioOptions": [
{
"key": "youtube",
"label": "YouTube"
},
{
"key": "self-hosted",
"label": "Your own server, e.g. Shoper store server"
}
]
}
},
{
"name": "ownVideoLink",
"type": "text",
"validators": [
{
"type": "url",
"options": {
"allowRelativePath": true
}
}
],
"relations": [
{
"parentName": "videoType",
"parentValueToActionsMap": [
{
"value": "self-hosted",
"actions": ["setVisible", "setAvailable", "setRequired"]
},
{
"value": "youtube",
"actions": ["setHidden", "setDisabled", "setOptional"]
}
]
}
],
"options": {
"placeholder": "https:// or /"
},
"label": "Link to video file",
"labelDescription": "Supported formats: *.mp4, *.avi, *.ogg, *.webm",
"supportsTranslations": true
},
{
"name": "youtubeVideoLink",
"type": "text",
"label": "Link to a YouTube video",
"supportsTranslations": true,
"options": {
"placeholder": "e.g. https://youtu.be/..."
},
"relations": [
{
"parentName": "videoType",
"parentValueToActionsMap": [
{
"value": "self-hosted",
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": "youtube",
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
},
{
"name": "youtubeAspectRatio",
"type": "select",
"hint": "The default aspect ratio for videos is 16:9 (landscape). If you choose a different aspect ratio than your video has, it will be displayed with black bars.",
"label": "Video aspect ratio",
"defaultValue": "16/9",
"options": {
"selectOptions": [
{
"key": "16/9",
"label": "16/9 (landscape)"
},
{
"key": "9/16",
"label": "9/16 (portrait)"
},
{
"key": "1/1",
"label": "1/1 (square)"
},
{
"key": "4/3",
"label": "4/3 (standard TV)"
}
]
},
"relations": [
{
"parentName": "videoType",
"parentValueToActionsMap": [
{
"value": "self-hosted",
"actions": ["setHidden", "setDisabled"]
},
{
"value": "youtube",
"actions": ["setVisible", "setAvailable"]
}
]
}
]
},
{
"name": "captionTrackLink",
"type": "text",
"validators": [
{
"type": "url",
"options": {
"allowRelativePath": true
}
}
],
"options": {
"placeholder": "https:// or /"
},
"label": "Link to captions file",
"labelDescription": "Supported format: *.vtt",
"isRequired": false,
"supportsTranslations": true,
"relations": [
{
"parentName": "videoType",
"parentValueToActionsMap": [
{
"value": "self-hosted",
"actions": ["setVisible", "setAvailable"]
},
{
"value": "youtube",
"actions": ["setHidden", "setDisabled"]
}
]
}
]
},
{
"name": "autoplay",
"type": "checkbox",
"label": "Autoplay video",
"defaultValue": 1
},
{
"name": "vidMuted",
"type": "checkbox",
"label": "Mute video",
"hint": "Recommended for videos set to autoplay (EAA Directive)",
"defaultValue": 1
},
{
"name": "vidLoop",
"type": "checkbox",
"label": "Loop video playback",
"hint": "Once playback is complete, the video will restart.",
"defaultValue": 1
},
{
"name": "vidControls",
"type": "checkbox",
"label": "Display video player controls",
"hint": "Regardless of these settings, it will be possible to pause the video (EAA Directive requirement)",
"defaultValue": 1,
"relations": [
{
"parentName": "videoType",
"parentValueToActionsMap": [
{
"value": "self-hosted",
"actions": ["setVisible", "setAvailable"]
},
{
"value": "youtube",
"actions": ["setHidden", "setDisabled"]
}
]
}
]
},
{
"name": "controls",
"type": "checkbox",
"label": "Display video player controls (recommended)",
"hint": "Videos must include pause controls (EAA Directive)",
"defaultValue": 1,
"relations": [
{
"parentName": "videoType",
"parentValueToActionsMap": [
{
"value": "self-hosted",
"actions": ["setHidden", "setDisabled"]
},
{
"value": "youtube",
"actions": ["setVisible", "setAvailable"]
}
]
}
]
},
{
"name": "addPosterImage",
"type": "checkbox",
"label": "Add video cover image",
"hint": "For videos that don't autoplay. This image replaces the auto-generated video thumbnail.",
"defaultValue": 0,
"relations": [
{
"parentName": "videoType",
"parentValueToActionsMap": [
{
"value": "self-hosted",
"actions": ["setVisible", "setAvailable"]
},
{
"value": "youtube",
"actions": ["setHidden", "setDisabled"]
}
]
}
],
"children": [
{
"name": "posterImage",
"type": "imageUpload",
"label": "Image <<SVE>>",
"options": {
"requireImageSize": false,
"allowedExtensions": ["webp", "svg", "jpg", "png", "gif"]
},
"relations": [
{
"parentName": "addPosterImage",
"parentValueToActionsMap": [
{
"value": 0,
"actions": ["setHidden", "setDisabled", "setOptional"]
},
{
"value": 1,
"actions": ["setVisible", "setAvailable", "setRequired"]
}
]
}
]
}
]
}
]
},
{
"label": "Accessibility",
"state": "folded",
"elements": [
{
"name": "videoDescription",
"type": "textarea",
"label": "Video description for screen readers",
"hint": "The description of the video will be read by software used by people with visual impairments. Describe what is happening in the video to help understand it. This is required for videos without sound (EAA Directive).",
"isRequired": false,
"supportsTranslations": true
},
{
"name": "transcriptTrackLink",
"type": "text",
"label": "Link to transcript file",
"hint": "The transcript link will be placed below the video. This is required for videos with audio (EAA Directive).",
"isRequired": false,
"supportsTranslations": true,
"validators": [
{
"type": "url",
"options": {
"allowRelativePath": true
}
}
],
"options": {
"placeholder": "https:// or /"
}
},
{
"name": "audioDescriptionTrackLink",
"type": "text",
"label": "Link to audio description file",
"hint": "Required for videos with audio (EAA Directive).",
"validators": [
{
"type": "url",
"options": {
"allowRelativePath": true
}
}
],
"options": {
"placeholder": "https:// or /"
},
"supportsTranslations": true,
"relations": [
{
"parentName": "videoType",
"parentValueToActionsMap": [
{
"value": "self-hosted",
"actions": ["setVisible", "setAvailable", "setOptional"]
},
{
"value": "youtube",
"actions": ["setHidden", "setDisabled", "setOptional"]
}
]
}
]
}
]
}
]