Embed YouTube, Vimeo, and SoundCloud with shortcodes. Video and iframe embeds require one CSP config line — SoundCloud loads via Hugo’s asset pipeline and needs no extra config.

CSP setup for video embeds

Iframes from external domains are blocked by the theme’s Content Security Policy by default. The soundcloud, openstreetmap, youtube-embed, and spotify-embed shortcodes register their own host automatically, but Hugo’s built-in youtube and vimeo shortcodes have no such hook — allow their hosts with the embeds preset under [params.csp] in hugo.toml:

[params.csp]
  embeds = ["youtube", "vimeo", "soundcloud", "umap"]

embeds accepts any of youtube, vimeo, soundcloud, spotify, umap and maps each to its known host(s). Use frameSrc instead (or as well) for hosts the preset doesn’t cover. Without one of these, the embed renders in the HTML but the browser silently refuses to load it.

YouTube

Hugo’s built-in youtube shortcode uses youtube-nocookie.com by default — no tracking cookies unless the viewer clicks play.

Find the video ID in the URL after ?v=:

{{< youtube VLvVNMbQIRY >}}

youtube-embed — the theme’s own shortcode

Ryder also ships its own youtube-embed shortcode, named distinctly rather than overriding Hugo’s built-in one (so the built-in keeps working exactly as above). The difference: youtube-embed registers its host on .Page.Store the same way soundcloud and openstreetmap do, so it needs no embeds config at all.

{{< youtube-embed id="VLvVNMbQIRY" >}}

Vimeo

{{< vimeo 48912912 >}}

SoundCloud

Use the soundcloud shortcode with an API resource URL. To find a track’s API URL: open SoundCloud in a browser, view page source, and search for "api.soundcloud.com/tracks/.

{{< soundcloud url="https://api.soundcloud.com/tracks/1120047793" >}}

Parameters

Spotify

The spotify-embed shortcode covers tracks, albums, playlists, artists, episodes, and shows, and registers open.spotify.com on .Page.Store automatically — no embeds config needed for it specifically (the spotify preset is still there for a hand-written iframe).

{{< spotify-embed type="track" id="4uLU6hMCjMI75M1A2tKUQC" >}}

Parameters

Video Lightbox

Beside main.js’s existing imageGallery (images only), video-lightbox shows a clickable tile that opens a modal with the video — nothing is requested from the embed host until you actually click. Provide a thumbnail (a page-bundle resource or an assets/-relative path) for a real preview image; without one it falls back to a plain play-button tile, as below.

{{< video-lightbox provider="youtube" id="VLvVNMbQIRY" title="Rob Pike at Gopherfest" >}}

Parameters