# Video

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

## 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](https://cloudinary.com), [Vimeo](https://vimeo.com), and [YouTube](https://youtube.com). 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](https://gohugo.io/about/hugo-and-gdpr/#youtube), 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](https://cloudinary.com), [Vimeo](https://vimeo.com), and [YouTube](https://youtube.com) as video provider. You can configure these providers in your site parameters.

```toml
[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.

```scss
.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 | Description |
| --- | --- | --- | --- | --- |
| `account` | string |  |  | 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 |  |  | 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. |
| `media-id` | string |  |  | ID of the asset to be embedded. |
| `provider` | string |  | `youtube` | Name of the video provider. It should match one of the registered providers in the site's parameters under `videos`. |
| `query-args` | string |  |  | Optional query parameters to append to video asset's url. The query string is prepended with a `?` symbol. Only applicable to Cloudinary. |
| `ratio` | select |  |  | 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`, `3x1`, `3x2`, `4x3`, `16x9`, `21x9`, `auto`]. |
| `title` | string |  |  | Title of the element. If the element references a (local) page, the title overrides the referenced page's title. |