Skip to main content
GOHUGO
Youtube

Youtube

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

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:

  • 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"]
Back to top
Back Forward