Docs

Video

Use the video shortcode to embed a responsive video on your site.
Overview   Video   Vimeo   YouTube   Configuration   Styling   Arguments   Options Type  

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.

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.

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.

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

Vimeo  

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

Configuration  

Hinode supports Cloudinary  , Vimeo  , and YouTube  as video provider. You can configure these providers in your site parameters.

[videos]
    [videos.cloudinary]
        host = "cloudinary"
        account = "demo"
    [videos.vimeo]
        host = "vimeo"
    [videos.youtube]
        host = "youtube"

Styling  

The file assets/scss/components/_video.scss defines the Hinode-specific styling of the video shortcode.

.video-embedded {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: #{$theme-border-radius};
}

.video-embedded > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

// Adapted from https://github.com/gohugoio/hugo/tpl/tplimpl/embedded/templates/shortcodes/vimeo_simple.html
.__h_video {
    position: relative;
    padding-bottom: 56.23%;
    height: 0;
    overflow: hidden;
    width: 100%;
    background: #000;
}

.__h_video img {
    width: 100%;
    height: auto;
    color: #000;
}

.__h_video .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    cursor: pointer;
}

.video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

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.
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.
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.
On this page