Hugo Video.js Shortcode
Learn how to use Hugo Video.js shortcode.
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
Syntax
1{{< video-js src="URL" >}}
Parameters
src
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#0 | src | string | ✓ | - | - | - |
The video URL.
poster
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | poster | string | - | - | - | - |
The poster URL.
type
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | type | string | - | - | - | - |
The media type of video.
playbackRates
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | playbackRates | string | - | video_js.playback_rates | - | - |
The playback rates, comma-separated.
skipForward
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | skipForward | number | - | video_js.skip_forward | - | - |
the time to skip forward, in seconds.
Available options: 5, 10, 30.
skipBackward
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | skipBackward | number | - | video_js.skip_backward | - | - |
the time to skip backward, in seconds.
Available options: 5, 10, 30.
muted
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | muted | boolean | - | false | - | - |
Whether to mute video.
loop
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | loop | boolean | - | false | - | - |
Whether to loop playback.
preload
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | preload | boolean | - | false | - | - |
Whether to preload playback.
controls
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | controls | boolean | - | true | - | - |
Whether to display video controls.
autoplay
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | autoplay | boolean | - | false | - | - |
Whether to autoplay playback, may fails sometime, set muted as true to improve it.
aspectRatio
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | aspectRatio | string | - | false | - | - |
Aspect ratio.
Available options: 16x9, 4x3, 9x16, 1x1.
Examples
MP4 Video Example
Source
1{{< video-js
2 src="https://commondata.razonyang.com/videos/raining-on-the-road-strewn-with-leaves.mp4"
3 cover="https://commondata.razonyang.com/videos/raining-on-the-road-strewn-with-leaves.png" >}}Result
HLS Video Example
Note
The
typeis optional if the video URL ends withm3u8.
Source
1{{< video-js src="https://devstreaming-cdn.apple.com/videos/streaming/examples/adv_dv_atmos/main.m3u8" type="application/x-mpegURL" >}}Result
MPEG DASH Video Example
Note
The
typeis optional if the video URL ends withmpd.
Source
1{{< video-js src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.mpd" type="application/dash+xml" >}}Result
Aspect Ratio Examples
Aspect Ratio 16:9
Source
1{{< video-js src="https://commondata.razonyang.com/videos/green-mountains-near-the-ocean.mp4" aspectRatio="16x9" >}}Result
Aspect Ratio 4:3
Source
1{{< video-js src="https://commondata.razonyang.com/videos/green-mountains-near-the-ocean.mp4" aspectRatio="4x3" >}}Result
Aspect Ratio 1x1
Source
1{{< video-js src="https://commondata.razonyang.com/videos/green-mountains-near-the-ocean.mp4" aspectRatio="1x1" >}}Result
Aspect Ratio 9:16
Source
1{{< video-js src="https://commondata.razonyang.com/videos/green-mountains-near-the-ocean.mp4" aspectRatio="9x16" >}}Result