Adding videos to eleventy pages

16 Apr 2021websites

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

< Back to all posts