Docs

Video

Last modified on June 20, 2025 • 6 min read • 1,095 words
Component  
Component  
Share via

Use the video shortcode to embed a responsive video on your site.

Overview   Arguments   Options Type   Configuration   Examples   Video   Vimeo   YouTube  

Overview  

  Important

Hinode uses a strict Content Security Policy by default. Be sure your server configuration safe lists your video provider in the frame-src configuration, 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:

markdown 
{{< youtube w7Ft2ymGmfc >}}

Arguments  

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 Flag indicating the animation or video should start playing immediately when loaded, if supported by the browser. Any audio will be muted.
autotitle bool v0.25.2      Trigger to retrieve the title from the video metadata, if supported by the provider.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
host string v0.26.5      v1.0.0      Use provider instead. Host name of the video provider. It should match one of the registered providers in the site’s parameters under videos.
id string v1.0.0      Use media-id instead. ID of the video to be embedded.
media-id string v1.0.0      ID of the asset to be embedded.
options string v0.28.2      v1.0.0      Use query-args instead. Optional query parameters to append to video asset’s url. The query string is prepended with a ? symbol. Only applicable to Cloudinary.
page *hugolib.pageState, *hugolib.pageForRenderHooks, *hugolib.pageForShortcode yes v0.26.5      Context of the current page.
position text.Position v0.26.5      Filename and position from which the shortcode was called.
provider string youtube v1.0.0      Name of the video provider. It should match one of the registered providers in the site’s parameters under videos.
query-args string v1.0.0      Optional query parameters to append to video asset’s url. The query string is prepended with a ? symbol. Only applicable to Cloudinary.
ratio select v0.26.5      Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. When set to auto, the original aspect ratio is used. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9, auto].
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Name Type Required Default
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
Flag indicating the animation or video should start playing immediately when loaded, if supported by the browser. Any audio will be muted.
autotitle bool
v0.25.2      Trigger to retrieve the title from the video metadata, if supported by the provider.
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
host string
v0.26.5      v1.0.0      Use provider instead. Host name of the video provider. It should match one of the registered providers in the site’s parameters under videos.
id string
v1.0.0      Use media-id instead. ID of the video to be embedded.
media-id string
v1.0.0      ID of the asset to be embedded.
options string
v0.28.2      v1.0.0      Use query-args instead. Optional query parameters to append to video asset’s url. The query string is prepended with a ? symbol. Only applicable to Cloudinary.
page *hugolib.pageState, *hugolib.pageForRenderHooks, *hugolib.pageForShortcode yes
v0.26.5      Context of the current page.
position text.Position
v0.26.5      Filename and position from which the shortcode was called.
provider string youtube
v1.0.0      Name of the video provider. It should match one of the registered providers in the site’s parameters under videos.
query-args string
v1.0.0      Optional query parameters to append to video asset’s url. The query string is prepended with a ? symbol. Only applicable to Cloudinary.
ratio select
v0.26.5      Ratio of the media asset. When the asset is an image, it is resized and cropped (not applicable to vector graphics). For video assets, the padding of the embedded frame is adjusted. When set to auto, the original aspect ratio is used. Supported values: [1x1, 3x2, 4x3, 16x9, 21x9, auto].
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.

Options Type  

Name Type Required Default Comment
max int End of the value range (inclusive).
min int Start of the value range (inclusive).
values slice A slice of permitted select values.
Name Type Required Default
max int
End of the value range (inclusive).
min int
Start of the value range (inclusive).
values slice
A slice of permitted select values.

Configuration  

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"

Examples  

Embed a responsive video by specifying the hosting provider.

Video  

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.

markdown 
{{< video provider="cloudinary" account="demo" media-id="elephants" autoplay=true >}}

Vimeo  

  Important

Since Hinode v0.27.3  you need to explicitly add vimeo to 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.

markdown 
{{< vimeo media-id="55073825" autoplay=true autotitle=true >}}

YouTube  

  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.

markdown 
{{< youtube media-id="w7Ft2ymGmfc" autoplay=true autotitle=true >}}
On this page: