{{ cms_video(name, { controls: ..., autoplay: ..., url: '...', type: '...', class: '...' }) }}
| Argument | Description | Data Type |
|---|---|---|
name | The element identifier | String |
controls (optional) | Display standard video controls (play, pause, volume, etc.) | Boolean |
autoplay (optional) | Starts playback automatically when the page loads. | Boolean |
url (optional) | Link to the video file | String |
type (optional) | Specify the video format (most browsers can handle multiple formats) | String |
class (optional) | A space-separated list of CSS classes to style the video component | String |
Multiple video sources
{{ cms_video(name, { controls: ..., autoplay: ..., sources: [{ url: '...', type: '...' },{ url: '...', type: '...' }], class: '...' }) }}
| Argument | Description | Data Type |
|---|---|---|
name | The element identifier | String |
controls (optional) | Display standard video controls (play, pause, volume, etc.) | Boolean |
autoplay (optional) | Starts playback automatically when the page loads. | Boolean |
sources (optional) | An array of objects specifying alternative video sources | Array[Object] |
class (optional) | A space-separated list of CSS classes to style the video component | String |
type:'video/mp4' is a common format, but check browser compatibility for others
The class variable is only accessible in the code. All other variables are available in the Canopy editor.
Video component template
<video {{ controls }} {{ autoplay }} class={{ class }}>
{% for source in sources %}
<source src={{ url }} type={{ type }}>
{% endfor %}
</video>
Rendered HTML output
<video controls autoplay class="w-full rounded-lg">
<source src="https://placehold.co/600x400" type="video/mp4" />
Your browser does not support the video tag.
</video>
Example
{{ cms_video('myvideo',{ sources: [{ type: 'video/mp4',url: 'https://cdn.blutui.com/uploads/curation/collection-web-2.mp4' }], controls: true, autoplay: true }) }}