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.0.5 (2022-01-24) |
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="_BM3zCMRPcw" >}}
2{{< youtube "_BM3zCMRPcw" >}}
3{{< youtube id="_BM3zCMRPcw" title="Lower your eyelids to die with the sun - M83" >}}
Run hugo server
in this module and a list of sample usages will be presented at http://localhost:1313
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: