How to embed Youtube Videos into 11ty

I was getting annoyed at having to manually copy Youtube's privacy preserving embed code each time I wanted to include a video in a post, so here is a simple shortcode for 11ty that does the heavy lifting for you. Provide it with a Video ID or a full URL, and it will create a youtube-nocookie embed in your post for you. Arguements url (share/watch/youtu.be/embed/shorts URL, or a bare 11-char video ID), title (used as iframe title attr, HTML-escaped) Output: responsive 16:9 <iframe> embed via youtube-nocookie.com (privacy-enhanced) Errors: throws if no video ID can be extracted from url Example: {% youtube "dQw4w9WgXcQ", "Definitely Not a Rick-Roll" %} Add this code to your eleventy.config.js: eleventyConfig.addShortcode("youtube", (url, title) => { const input = String(url).trim(); const bareId = input.match(/^[a-zA-Z0-9_-]{11}$/); const match = bareId || input.match(/(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:watch\?v=|embed\/|shorts\/))([a-zA-Z0-9_-]{11})/); if (!match) { throw…

Commenting on Bubbles has been removed. Why? If you want to talk about this post, write to the author, use the comments on their blog if it has them, or reply with a "RE:" post on your own blog. Suggestions? feedback@bubbles.town