(video: …)
Embeds a video from YouTube, Vimeo or a local file by URL or filename
Attributes
In addition to the main video, option, the tag supports the following attributes:
autoplay
caption
controls
class
disablepictureinpicture
height
loop
muted
playsinline
poster
preload
style
width
| Attribute | Description | Default |
|---|---|---|
| autoplay | The autoplay which is added to video element (only for local and remote videos) | false |
| caption | The caption | null |
| controls | The controls which is added to video element (only for local and remote videos) | true |
| class | The class which is added to iframe and video elements | video |
| disablepictureinpicture | Whether the picture-in-picture feature is disabled for the video element | false |
| height | The height that is added to iframe and video elements | null |
| loop | The loop which is added to video element (only for local and remote videos) | true |
| muted | The muted which is added to video element (only for local and remote videos) | true |
| playsinline | Mobile browsers, will play the video right where it is instead of opening it in fullscreen | false |
| poster | The poster attribute specifies an image to be shown while the video is downloading (only for local and remote videos) | true |
| preload | The option that the video should be loaded when the page loads (only for local and remote videos) | null |
| style | The style that is added to iframe and video elements | null |
| width | The width that is added to iframe and video elements | null |
The autoplay, controls, loop, muted, poster, preload attributes are not supported by video providers such as YouTube and Vimeo.
Attribute defaults from config
You can customize the defaults of this tag's attributes via the kirbytext.video config option.
Supported video sources
YouTube
Embedded YouTube video by video URL:
(video: http://www.youtube.com/watch?v=lLuc6rtWkrM)The following link YouTube link formats are recognized:
Basic video URLs:
- https://www.youtube.com/watch?v=lLuc6rtWkrM
- https://www.youtube.com/embed/lLuc6rtWkrM
- https://youtu.be/lLuc6rtWkrM
- https://www.youtube-nocookie.com/embed/d9NF2edxy-M
URLs with additional query parameters:
- https://www.youtube.com/watch?v=d9NF2edxy-M&t=10
- https://www.youtube-nocookie.com/watch?v=d9NF2edxy-M&t=10
- https://www.youtube.com/embed/d9NF2edxy-M?start=10
- https://www.youtube-nocookie.com/embed/d9NF2edxy-M?start=10
Playlists:
- https://www.youtube.com/embed/videoseries?list=PLj8e95eaxiB9goOAvINIy4Vt3mlWQJxys
- https://www.youtube-nocookie.com/embed/videoseries?list=PLj8e95eaxiB9goOAvINIy4Vt3mlWQJxys
- https://www.youtube.com/playlist?list=PLj8e95eaxiB9goOAvINIy4Vt3mlWQJxys
- https://www.youtube-nocookie.com/playlist?list=PLj8e95eaxiB9goOAvINIy4Vt3mlWQJxys
Vimeo
Embedded Vimeo video by video URL:
(video: http://vimeo.com/3432886)Local and remote videos
You can now embed videos from the local or from remote servers.
# local
(video: local-video.mp4)
# remote
(video: https://example.com/sample-video.mp4)The video will be muted automatically if autoplay is enabled and muted is not defined. To start autoplay with sound, use it as in the following example:
(video: local-video.mp4 autoplay: true muted: false)Examples
Caption
(video: http://youtu.be/lLuc6rtWkrM caption: This is a really nice video)<iframe> size
(video: http://vimeo.com/3432886 width: 300 height: 200)Custom CSS class
(video: http://youtu.be/lLuc6rtWkrM class: myvideo)New attributes
The video tag supports some attributes of the HTML <video> element: autoplay, controls, loop, muted, poster, preload
(video: local-video.mp4 autoplay: true)
(video: local-video.mp4 controls: false autoplay: true loop: true)
(video: local-video.mp4 poster: cover.jpg)
(video: local-video.mp4 preload: auto)
(video: https://example.com/sample-video.mp4 muted: true controls: false autoplay: true)
(video: local-video.mp4 poster: https://example.com/sample-cover.jpg)