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