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 >}}Note
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 >}}