VTEX Developer Portal

All ContributorsAll Contributors

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

Media PlaceholderMedia Placeholder

Configuration

  1. Add the store-video app to your theme's dependencies in the manifest.json file:
 "dependencies ": {
+  "vtex.store-video": "1.x"
 }
  1. In any desired theme template, add the video block with the desirable props. For example:
  "video#background": {
    "props": {
      "width": "100%",
      "height": "600px",
      "loop": false,
      "autoPlay": true,
      "muted": false,
      "src": "https://www.youtube.com/watch?v=wygFqZXMIco",
      "blockClass": "videoEl"
    }
  }

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.undefined
controlsTypeenumThe type of controls. It can be custom-vtex( only works if the video URL represents a HTML5 player ), native or none.undefined
autoPlaybooleanWhether the video will start automatically after loaded(true) or not(false). Note that if the value is true, the muted property will automatically be setted to true.false
mutedbooleanWhether the video will start with the audio on(false) or not(true).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 stringThe width of the video exhibition area. It could be as %(string) or pixels(number).undefined
heightnumber or stringThe height 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

:warning: _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 ✨

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind are welcome!

Updated 7 months ago


Video


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.