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.
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.
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: