ygorneves10 / store-video

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Video

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

Configuration

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

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

2. 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 name	Type	Description	Default value
name	string	Video name for SEO and accessibility.	undefined
description	string	Video description for SEO and accessibility.	undefined
src	string	Video URL. It can be a youtube URL, vimeo URL or a self-hosted video URL.	undefined
type	string	Video type.	undefined
poster	string	Cover image URL to be displayed before the video playback.	undefined
controlsType	enum	The type of controls. It can be custom-vtex( only works if the video URL represents a HTML5 player ), native or none.	undefined
autoPlay	boolean	Whether 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
muted	boolean	Whether the video will start with the audio on(false) or not(true).	false
loop	boolean	Whether the video will run in a loop(true) or not(false).	false
playsInline	boolean	Whether the video will play inline(true) or not(false).	false
width	number or string	The width of the video exhibition area. It could be as %(string) or pixels(number).	undefined
height	number or string	The height of the video exhibition area. It could be as %(string) or pixels(number).	undefined
PlayIcon	string	Video play icon for custom-vtex controls.	icon-play
PauseIcon	string	Video pause icon for custom-vtex controls.	icon-pause
VolumeOnIcon	string	Video volume on icon for custom-vtex controls.	icon-volume-on
VolumeOffIcon	string	Video volume off icon for custom-vtex controls.	icon-volume-off
FullscreenIcon	string	Video fullscreen icon for custom-vtex controls.	icon-extend
classes	CustomCSSClasses	Used 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 ✨

Thanks goes to these wonderful people:

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