Youtube

Youtube v1.1.9

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

Add this module 
[[module.imports]]
path = "github.com/davidsneighbour/hugo-youtube"
disable = false
ignoreConfig = false
ignoreImports = false
Latest Version v1.1.9 (2022-09-23)
Fix to this version 
hugo mod get github.com/davidsneighbour/[email protected]

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

parameter default notes
class w-100 classnames to add to the video container
id ID of the YouTube video to embed
params custom parameters to be added to influence the display and functionality of the player. These parameters should be URLized.
title title of the video, will be displayed as banner on top of the preview image

Resources

You need to add the following files to your pipelines:

  • libs/liteyoutube/lite-yt-embed.js
  • libs/liteyoutube/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 'libs/liteyoutube/lite-yt-embed';

If you are not using any Hugo pipelines then add the Javascript at the end of the page before the </body> tag and CSS in the header before the </head> tag. These files are available via mount into the static folder.

1<link href="/libs/liteyoutube/lite-yt-embed.css" rel="stylesheet">
2<script src="/libs/liteyoutube/lite-yt-embed.js" async defer></script>

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"]