Video
Use the video shortcode to embed a responsive video on your site.
Important
Hinode uses a strict Content Security Policy by default. Be sure your server configuration safe lists your video provider in the
frame-srcconfiguration, or your video will not show. You can modify the safe list in the Server headers.
Use the video shortcode to embed a responsive video on your site. The shortcode currently supports three providers, being
Cloudinary
,
Vimeo
, and
YouTube
. The last two providers also support shorthand notation. As an example, the following shortcode displays a Hugo quickstart guide:
{{< youtube w7Ft2ymGmfc >}}The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| account | string | v0.26.5 Account name of the video asset, required by some digital asset managers. You can also set the default account name in the site’s parameters. | ||
| autoplay | bool | false | Flag indicating the video should start playing immediately when loaded, if supported by the browser. The audio will be muted. | |
| autotitle | bool | false | v0.25.2 Trigger to retrieve the title from the video metadata, if supported by the provider. | |
| class | string | Class attribute of the video wrapper element. | ||
| host | string | youtube |
v0.26.5
Host name of the video provider. It should match one of the registered providers in the site’s parameters under videos. |
|
| id | string | yes | Public ID of the video to be embedded. | |
| page | *hugolib.pageState, *hugolib.pageForShortcode | yes | v0.26.5 Context of the current page. | |
| portrait | bool | false | v0.26.5 Flag to adjust the ratio from landscape to portrait. The image itself is not rotated, only the crop area is adjusted. Not applicable to vector graphics. | |
| position | text.Position | v0.26.5 Filename and position from which the shortcode was called. | ||
| ratio | select | v0.26.5 Ratio of the video. If set, determines the padding of the embedded video frame. When not specified, the video dimensions used to calculate the padding are retrieved programmatically. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9]. | ||
| title | string | Title of the video. You can also set autotitle to retrieve the title programmatically at build time, if supported by the provider. |
Hinode supports Cloudinary , Vimeo , and YouTube as video provider. You can configure these providers in your site parameters. Hinode uses the following configuration by default:
[videos]
[videos.cloudinary]
host = "cloudinary"
account = "demo"
[videos.vimeo]
host = "vimeo"
[videos.youtube]
host = "youtube"Embed a responsive video by specifying the hosting provider.
As an example, the following shortcode displays an Elephants video hosted by Cloudinary. Cloudinary requires both an account name and a public ID of the video. You can provide the account name as shortcode argument, or configure a default account name in the site’s parameters.
{{< video host="cloudinary" account="demo" id="elephants" autoplay=true >}}Important
Since Hinode v0.27.3 you need to explicitly add
vimeoto your page’s optional modules to ensure compliance with the Content Security Policies. When setting enableDNT to true, the Vimeo player will be blocked from tracking any session data, including all cookies and stats.
As an example, the following shortcode displays a Vimeo video. By setting autotitle to true, Hinode captures the video’s title as defined by Vimeo and assigns this to the title of the video frame.
{{< vimeo id="55073825" autoplay=true autotitle=true >}}Note
In privacy-enhanced mode , YouTube will not store information about visitors on your website unless the user plays the embedded video.
As an example, the following shortcode displays a Hugo quickstart guide hosted by YouTube.
{{< youtube id="w7Ft2ymGmfc" autoplay=true autotitle=true >}}