📹 HTML5-Video Kirbytag by @wottpal
(Disclaimer: This is a pre-release.)
The last kirbytag for HTML5-videos you'll ever need.
- Dynamic Video- & Image-Source Recognition
- Lazy-Loading of all sources
- Placeholder-Color until the video has loaded to increase Perceived-Performance1, 2
- Use Fallback Images or GIFs
- Configurable & Customizable to it's core
1 Works out of the box with kirby-dominant-color by @iandoe if fallback-image is provided
2 For consistency the fade-out transition looks exactly like the
color-placeholder in ImageSet by @fabianmichael
Use Kirby's CLI and install the plugin via:
kirby plugin:install wottpal/kirby-video or place the repo manually under
Include styles1 in your
<?= css('assets/plugins/video/video.min.css') ?>`
Include scripts2 before the end of your
<?= js('assets/plugins/video/video.min.js') ?>
1 Necessary for placeholder-color and ratio-sizing.
2 Necessary for lazy-loading and img/gif fallback.
Internet Explorer Support
If you want to support IE you either need to polyfill Array.from or rewrite some parts of
It's pretty straightforward to use this Kirbytag, the only rule to follow is basically: Give all your source-files (and fallback-image) the same filename. Only the file-extensions should differ.1
So, if you embed a video you only have to specify that base-filename and the plugin determines all matching files automagically. If you want to specify file-types/-formats or the source-order please see Options.
Video-Options & Presets
You can also manually specify options for the
<video> element. In addition to the spec-compliant attributes you can also use
lazyload to enable lazy-loading. Options are seperated by spaces.
Same as first: (video: funniest_thing_ever options: lazyload controls) GIF-like behavior: (video: funniest_thing_ever options: lazyload autoplay loop muted playsinline)
These two options are also bundled in presets by default. You can add/modify presets by your own (see Options).
Same as first: (video: funniest_thing_ever preset: default) GIF-like behavior: (video: funniest_thing_ever preset: gif)
By default videos are displayed in their native resolutions. But you can specify
(video: funniest_thing_ever width: 500px height: 300px)
If you don't use kirby-dominant-color you can manually specify the placeholder-color with the
color-option. This also overwrites the dominant-color if given. If neither a dominiant-color is available nor you've specified
#fff is used. To change this default see Options.
figure to false you can disable the video-element to be wrapped by a
<figure>. Please note that without a wrapper color-placeholders are disabled.
1They also should have the same dimensions. I haven't tested anything else.
2 Theoretically you can also specify these in
options but if you also want to set a preset, these get overwritten by it.
The following options can be set globally in your
c::set($key, $value = null). You can also set multiple keys with
c::set([$key => $value, ..]).
The name of the tag to embed a video within kirbytext.
Additional class which is added to all video-elements.
The default color of the placeholder.
Add your own presets to the default presets or modify them. See Usage above for the two default presets
[ 'webm' => 'video/webm; codecs="vp9"', 'mp4' => 'video/mp4', 'ogg' => 'video/ogg' ]
Specify all video-filetypes (and their respective type-attributes) you want the plugin to look for. The order is the same of the resulting
Note: It's totally fine if you don't supply all of these. But at least one has to be available, otherwise no
<video> is generated.
['gif', 'jpeg', 'jpg', 'png'])
The image-extensions which are used to find a fallback-image. The first found file is used an the others are ignored.
Globally prevent video-embeds to be wrapped by a
<figure> element. Please note that without a wrapper color-placeholders are disabled.
Have a look at the releases page.
- Option to disable Preview-Color
- Option to disable
- Option to specify ratio + ratio-placeholders to prevent page-reflow when ratio is given. (like in ImageSet)
- Make it work with @bastianallgeier's
columns-kirbytag & markdown.extra enabled
- Maybe use responsive fallback images
🐯 For Reference
Interesting reads on
For minification and transpilation I use Gulp. Please note that all files under
assets/ are only the generated ones from
# Install Dependencies npm i # Or: Install Dependencies for Hipsters yarn # Build & Watch (Install 'gulp-cli' globally to omit the 'npx') npx gulp
Just kidding. This plugin is totally free. Please consider following me on Twitter if it saved your day.
You can also check out one of my other Kirby-plugins: