Skip to content

Kirby 4.5.0

(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:

URLs with additional query parameters:

Playlists:

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)