Skip to main content
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:

  • 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"]
Published: Wed, Aug 3, 2022 at 9:21pm (Last Modified: Sat, Oct 15, 2022 at 6:57pm)
Last Commit: [2b38e64ae1] View history Suggest edits on GitHub
Tags:
Share: LinkedIn Facebook Twitter