San Luis Valley IT

Websites and IT for Southern Colorado

Adding videos to eleventy pages


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>

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%"
        src="${shortCode}" frameborder="0"
        allow="accelerometer;autoplay;clipboard-write;encrypted-media; gyroscope;picture-in-picture"

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

{% yt '3DaRrmEPvYs' %}

And it comes out a little something like this:

< Back to all posts