This Hugo theme component provides a shortcode: video
for embedding videos using the HTML video element.
It comes with English, French, German, Russian, Japanese, Korean, Polish, Chinese and Chinese (Taiwan) localizations. Other languages welcome! Send your pull request.
This shortcode uses Hugo Page Resources. The video to display must be placed in the page bundle.
The shortcode takes one mandatory argument: the filename of the video file to display, without the extension. It detects automatically if several versions of the file exists in the page bundle, and add accordingly the multiple src
tags. When an image file with the same filename is also present in the page bundle, it is automatically used as a poster frame.
When the browser doesn't support the HTML video element, the shortcode displays a localized notice allowing the video download for local playing.
Following video formats are supported:
.mp4
or .m4v
).webm
).ogv
)Default values:
controls
attribute is always included)preload="auto"
attribute is always included)width="100%"
attribute is included); this can be changed by indicating the desired width when calling the shortcode, see example below)height="640"
); credit goes to Evgeny Kuznetsov for this featuremuted="true"
, autoplay="true"
and loop="true"
. Credit goes to Tom McKenzie for this featureWhen no video file of the given name is found in the supported format (see above), the shortcode intentionally fails with a No valid video file with filename <filename> found.
error.
hugo-video
as a submodule to be able to get upstream changes later
git submodule add https://github.com/martignoni/hugo-video.git themes/hugo-video
hugo-video
as the left-most element of the theme
list variable in your site's or theme's configuration file config.yaml
or config.toml
. Example, with config.yaml
:
theme: ["hugo-video", "my-theme"]
or, with config.toml
,
theme = ["hugo-video", "my-theme"]
my-beautiful-screencast.mp4
, type this:
{{< video src="https://github.com/martignoni/hugo-video/raw/main/my-beautiful-screencast" >}}
or
{{< video src="https://github.com/martignoni/hugo-video/raw/main/my-beautiful-screencast" width="600px" >}}
Thanks to
Thanks to
muted
, autoplay
and loop
video attributes support.controls
disabling option.height
optional attribute.Copyright © 2019 onwards, Nicolas Martignoni nicolas@martignoni.net.
All the source code is licensed under GPL 3 or any later version
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.