Youtube
A responsive and very fast shortcode to add youtube videos to your Hugo website.
Add this module |
---|
[[module.imports]] path = "github.com/davidsneighbour/hugo-modules/modules/youtube" disable = false ignoreConfig = false ignoreImports = false |
Latest Version |
modules/youtube/v1.2023.15 (2023-09-18) |
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.
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:
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: