Adding videos to eleventy pages
websitesWe use eleventy static site generator for our static websites. It's a highly flexible and modular static site generator.
For example, adding a video to a page can be done with template shortcodes. This is the code in this site's .eleventy.js
(added after the return statement).
// Video shortcode
eleventyConfig.addShortcode('vid', (videoName) => `
<video controls width="100%">
<source src="${videoName}" type="video/${videoName.split('.').pop()}">
<a href="${videoName}">${videoName}</a>
</video>`)
Then we can drop this block into any page to add a video:
{% vid 'lightning.mp4' %}
And the result generated on the page looks like this:
Neat. We can do the same thing for youtube videos. Put this in .elventy.js
:
// Youtube shortcode
eleventyConfig.addShortcode('yt', (shortCode) => `
<iframe width="100%"
height="400vh"
src="https://www.youtube-nocookie.com/embed/${shortCode}" frameborder="0"
allow="accelerometer;autoplay;clipboard-write;encrypted-media; gyroscope;picture-in-picture"
allowfullscreen>
</iframe>`)
And then put this on any page, replacing 3DaRrmEPvYs
with your video's shortcode. That's the part in the youtube video URL after the v=
. For example, this is for https://www.youtube.com/watch?v=3DaRrmEPvYs
{% yt '3DaRrmEPvYs' %}
And it comes out a little something like this: