Youtube

A responsive and very fast shortcode to add youtube videos to your Hugo website.

[[module.imports]]
path = "github.com/davidsneighbour/hugo-modules/modules/youtube"
disable = false
ignoreConfig = false
ignoreImports = false

Usage

This shortcode replaces the internal youtube shortcode and adds an unobtrusive, privacy conscious and unbloated custom element for YouTube videos. It uses lite-youtube-embed.

1{{< youtube id="dQw4w9WgXcQ" >}}
2{{< youtube "dQw4w9WgXcQ" >}}
3{{< youtube id="dQw4w9WgXcQ" title="Lower your eyelids to die with the sun - M83" >}}

Parameters

Resources

You need to add the following files to your pipelines:

• assets/js/lite-yt-embed.js
• assets/scss/_lite-yt-embed.scss

These files are mounted into the assets directory. Using js.Build in Hugo for instance you can import the script this way:

1import LiteYTEmbed from './lite-yt-embed';
2customElements.define('lite-youtube', LiteYTEmbed);

and import the styles into your SASS pipeline with

1@import 'lite-yt-embed';

If you have your own templating going on you can use the parmeters in site.params.­dnb.­youtube.­config.­plugins to add to your pipelines.

Content Security Policy (CSP) rules for this plugin

Using a CSP on your website you will need to whitelist YouTube frame-src for the video and img-src for the preview thumbnail, if you have no local preview thumbnail available. The following rules are required in addition to your normal setup to allow videos to load:

1frame-src = ["https://www.youtube-nocookie.com"]
2img-src = ["https://i.ytimg.com", "https://ytimg.googleusercontent.com"]