Documentation
Feedback
Guides

Video

The Video app allows you to display video assets on your store pages.

{"base64":"  ","img":{"width":1420,"height":854,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1189801,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-video-0.png"}}

Configuration

  1. Add the store-video app to your theme's dependencies in the manifest.json file:

_10
"dependencies ": {
_10
+ "vtex.store-video": "1.x"
_10
}

  1. In any desired theme template, add the video block with the desirable props. For example:

_11
"video#background": {
_11
"props": {
_11
"width": "100%",
_11
"height": "600px",
_11
"loop": false,
_11
"autoPlay": true,
_11
"muted": false,
_11
"src": "https://www.youtube.com/watch?v=wygFqZXMIco",
_11
"blockClass": "videoEl"
_11
}
_11
}

video props

Prop nameTypeDescriptionDefault value
namestringVideo name for SEO and accessibility.undefined
descriptionstringVideo description for SEO and accessibility.undefined
srcstringVideo URL. It can be a youtube URL, vimeo URL or a self-hosted video URL.undefined
typestringVideo type.undefined
posterstringCover image URL to be displayed before the video playback. This is only available on the HTML5 player.undefined
controlsTypeenumVideo control options. It can be custom-vtex (only works if the video URL represents an HTML5 player), native or none.undefined
autoPlaybooleanWhether the video will start automatically after loading (true) or not (false). Note that if the value is true, the muted property will also be set as true and cannot be changed.false
mutedbooleanWhether the video will start with the audio on (false) or not (true). This prop can only be false if the autoPlay prop is set to false.false
loopbooleanWhether the video will run in a loop (true) or not (false).false
playsInlinebooleanWhether the video will play inline (true) or not (false).false
widthnumber or stringWidth of the video exhibition area. It could be as % (string) or pixels (number).undefined
heightnumber or stringHeight of the video exhibition area. It could be as % (string) or pixels (number).undefined
PlayIconstringVideo play icon for custom-vtex controls.icon-play
PauseIconstringVideo pause icon for custom-vtex controls.icon-pause
VolumeOnIconstringVideo volume on icon for custom-vtex controls.icon-volume-on
VolumeOffIconstringVideo volume off icon for custom-vtex controls.icon-volume-off
FullscreenIconstringVideo fullscreen icon for custom-vtex controls.icon-extend
classesCustomCSSClassesUsed to override default CSS handles. To better understand how this prop works, we recommend reading about it here. Note that this is only useful if you're importing this block as a React component.undefined

Use the admin's Site Editor to manage some props declared in the video block.

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
controlsContainer
fallbackContainer
fallbackImage
fullscreenButton
playButton
trackBar
trackContainer
trackTimer
videoContainer
videoElement
volumeContainer
volumeButton
volumeSlider

It's required that controlsType prop is set as custom-vtex in order to have the following CSS Handles properly working: controlsContainer, fullscreenButton, playButton, trackContainer, trackTimer, trackBar, volumeContainer, volumeSlider, and volumeButton.

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page