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 (extension
.mp4
or.m4v
) - WebM, (extension
.webm
) - Ogg, (extension
.ogv
)
Default values:
- Browser's default controls are displayed (
controls
attribute is always included) - Video can be preloaded (
preload="auto"
attribute is always included) - Video width is 100% (
width="100%"
attribute is included); this can be changed by indicating the desired width when calling the shortcode, see example below) - Video height attribute is not set by default, but can be explicitly set by indicating the desired height in pixels (i.e.
height="640"
); credit goes to Evgeny Kuznetsov for this feature - Following other video attributes can be set:
muted="true"
,autoplay="true"
andloop="true"
. Credit goes to Tom McKenzie for this feature - Default settings are used for other video attributes
When 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.
- Add the
hugo-video
as a submodule to be able to get upstream changes latergit submodule add https://github.com/martignoni/hugo-video.git themes/hugo-video
- Add
hugo-video
as the left-most element of thetheme
list variable in your site's or theme's configuration fileconfig.yaml
orconfig.toml
. Example, withconfig.yaml
:or, withtheme: ["hugo-video", "my-theme"]
config.toml
,theme = ["hugo-video", "my-theme"]
- Place your video file(s) in the page bundle of your post.
- In your site, use the shortcode, this way, indicating the video filename without its extension. If your video file is
my-beautiful-screencast.mp4
, type this:or{{< video src="my-beautiful-screencast" >}}
{{< video src="my-beautiful-screencast" width="600px" >}}
Thanks to
- Arsenii Lyashenko, for providing the Russian localization.
- Genji Fujimori, for providing the Japanese localization.
- Junho Park, for providing the Korean localization.
- Dominik Palula, for providing the Polish localization.
- hst1189, for providing the Chinese and Chinese (Taiwan) localizations.
Thanks to
- Tom McKenzie, for implementing
muted
,autoplay
andloop
video attributes support. - Olaf Haag, Paul Lettington and Christian Mahnke, for raising and fixing a few bugs.
- Arsenii Lyashenko, for implementing
controls
disabling option. - Evgeny Kuznetsov, for implementing
height
optional attribute.
Copyright © 2019 onwards, Nicolas Martignoni [email protected].
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.