CINXE.COM

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Embed Everything: Easy multimedia embeds for Eleventy</title><link rel="alternate" type="application/atom+xml" title="Blog RSS feed" href="https://gfscott.com/blog/feed.xml"><link rel="alternate" type="application/atom+xml" title="Releases feed" href="https://github.com/gfscott/eleventy-plugin-embed-everything/releases.atom"><link rel="canonical" href="https://gfscott.com/embed-everything/"><style>*{box-sizing:border-box}@font-face{font-family:'League Spartan Variable';src:url(/embed-everything/LeagueSpartanVariable.woff2) format('woff2-variations');font-weight:200 900}body{margin:0;background-color:#0d0d0d;font-family:'League Spartan Variable',sans-serif;color:#eee}a{color:inherit}h1,h2,h3{font-weight:400}footer,section{margin:0 auto;padding:8vh 2rem 12vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.grid{display:grid;width:100%;row-gap:1rem}@media (min-width:40rem){.grid{column-gap:3rem;row-gap:3rem}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.five{grid-template-columns:repeat(5,1fr)}}img{max-width:100%}.dead-center{place-self:center}code{font-size:1.4em;overflow:auto}.branding{background-color:#2f4f4f;margin:0 auto;padding:8vh 2rem 12vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.branding--hed{text-align:center;font-size:4em;font-weight:300;line-height:1em}.branding--hed .everything{font-weight:700;color:gold;text-shadow:0 6px 10px rgba(0,0,0,.4)}.branding--dek{text-align:center;font-weight:400}.logo{display:block;margin:0 auto;max-width:30rem}.logo--button{fill:gold;animation:float 3.9s infinite ease-in-out}.logo--chevrons{fill:rgba(255,255,255,.7)}@keyframes float{30%{transform:translateY(-20px)}}h3.meta{display:flex;margin:4rem auto 0;flex-direction:row}h3.meta>*{padding-left:1rem;padding-right:1rem;justify-items:center}h3.meta #version{font-family:monospace;text-decoration:none;font-size:20px;visibility:hidden}h3.meta #version.loaded{visibility:visible}h3.meta svg.logo-link{display:block;height:20px;fill:#eee}h3.meta svg.logo-npm{margin-top:4px}h3.meta a{padding-bottom:4px;border-bottom:solid 3px transparent;transition-property:all;transition-duration:.2s}h3.meta a:hover{border-bottom-color:#ddd}a:hover svg.logo-npm{fill:#c12127}a:hover svg.logo-github{fill:#0366d6}.showcase{background-color:tomato}.showcase h2{text-align:center}.showcase .grid{justify-items:stretch;align-items:stretch}.showcase code{background-color:rgba(0,0,0,.8);display:block;padding:2rem}.showcase code span{color:#708090;display:block;padding-bottom:3rem}.supported{background-color:#21212d}.supported h2{font-size:4em;font-weight:100;text-align:center;color:#ffe4b5;margin-top:0}.supported .grid{margin-top:4rem}.supported figure{margin:0;display:flex;flex-direction:column;justify-content:space-around;position:relative}.supported figure img{height:100px;object-fit:scale-down}.supported figure.new ::after{background-color:gold;color:#000;font-weight:700;text-transform:uppercase;content:"New!";display:block;position:absolute;right:0;top:0;padding:.25rem .5rem .3rem .6rem;border-radius:50%}.supported figcaption{text-align:center;margin-top:auto;padding-top:2rem}.install{background-color:gold;color:#444}.install h2{margin-top:0;font-weight:800;font-size:3em}.install code{background-color:#444;color:#eee;padding:2rem;width:100%}.credits{background-color:#1e90ff}#downloads{visibility:hidden}#downloads.loaded{visibility:visible}</style></head><body><header class="branding"><svg class="logo" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 1920 1080"><path class="logo--button" d="M1424 536a4 4 0 010 8 16397985 16397985 0 01-673 334l-2-3V205a4 4 0 016-3l669 334z"></path><path class="logo--chevrons" d="M0 592l631 428V887L122 543v-6l509-344V60L0 488v104zM1920 488L1289 60v133l509 344v6l-509 344v133l631-428V488z"></path></svg><h1 class="branding--hed"><span class="embed">Embed</span> <span class="everything">Everything</span></h1><h2 class="branding--dek">✨Really easy✨ multimedia embeds for <a href="https://11ty.dev" target="_blank">Eleventy</a></h2><h3 class="meta"><a id="version" href="https://github.com/gfscott/eleventy-plugin-embed-everything/releases" target="_blank">v0.0.0</a> <a href="https://www.npmjs.com/package/eleventy-plugin-embed-everything" target="_blank"><svg class="logo-link logo-npm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 250"><path d="M240 250h100v-50h100V0H240v250zM340 50h50v100h-50V50zM480 0v200h100V50h50v150h50V50h50v150h50V0H480zM0 200h100V50h50v150h50V0H0v200z"></path></svg> </a><a href="https://github.com/gfscott/eleventy-plugin-embed-everything" target="_blank"><svg class="logo-link logo-github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2099 568"><path d="M404 243H228c-5 0-8 4-8 8v86c0 5 3 9 8 9h69v107s-16 5-59 5c-50 0-120-18-120-173s73-175 142-175c59 0 85 10 101 15 5 2 10-3 10-8l20-83c0-2-1-5-3-7-7-4-47-27-150-27C121 0 0 50 0 291s138 276 255 276c96 0 155-41 155-41 2-1 2-5 2-6V251c0-4-3-8-8-8M1313 29c0-5-4-8-8-8h-100c-4 0-8 3-8 8v192h-155V29c0-5-3-8-8-8h-99c-5 0-8 3-8 8v519c0 5 3 9 8 9h99c5 0 8-4 8-9V326h155v222c0 5 4 9 8 9h100c4 0 8-4 8-9V29zM591 97c0-36-28-65-64-65-35 0-64 29-64 65s29 65 64 65c36 0 64-29 64-65M584 543V199c0-5-3-8-8-8h-99c-4 0-8 4-8 9v343c0 11 6 14 14 14h89c10 0 12-5 12-14zM1690 191h-98c-5 0-9 4-9 9v254s-25 19-60 19c-36 0-45-16-45-51V200c0-5-4-9-8-9h-100c-5 0-9 4-9 9v239c0 103 58 128 137 128 65 0 118-36 118-36l3 22c1 2 4 4 7 4h64c5 0 8-4 8-9V200c0-5-3-9-8-9M1920 472c-34-1-57-16-57-16V291s23-14 51-16c35-3 70 7 70 92 0 89-16 107-64 105m39-292c-56 0-94 25-94 25V29c0-5-3-8-8-8h-99c-5 0-9 3-9 8v519c0 5 4 9 9 9h69c3 0 5-2 7-5s4-24 4-24 41 39 118 39c90 0 142-46 142-206s-83-181-139-181M870 191h-75V92c0-3-2-5-6-5H687c-4 0-6 1-6 5v102l-54 13c-3 1-6 4-6 8v64c0 5 4 8 8 8h52v154c0 114 80 125 134 125 25 0 55-8 60-9 2-2 4-5 4-8v-70c0-5-4-8-8-8l-27 1c-36 0-49-17-49-39V287h75c4 0 8-3 8-8v-80c0-5-4-8-8-8"></path></svg></a></h3></header><main><section class="showcase"><div class="grid two"><h2>Automatically transform 💀boring URLs💀</h2><h2>into ✨embedded media✨</h2><code><span>// 11ty-markdown-file.md</span> https://www.youtube.com/watch?v=XaCrQL_8eMY</code><div><div style="position:relative;width:100%;padding-top:56.25%"><iframe style="position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%" width="100%" height="100%" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/XaCrQL_8eMY"></iframe></div></div><code><span>// 11ty-markdown-file.md</span> https://open.spotify.com/track/6GoLARmR2OZl2EldehFrsA</code><div><iframe src="https://open.spotify.com/embed/track/6GoLARmR2OZl2EldehFrsA" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></div><code><span>// 11ty-markdown-file.md</span> https://vimeo.com/341663153</code><div><div style="position:relative;width:100%;padding-top:56.25%"><iframe style="position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/341663153" frameborder="0" allow="autoplay; fullscreen" allowfullscreen=""></iframe></div></div></div></section><section class="supported"><h2>Supported services</h2><p>Each service is a separate plugin that can be installed independently! Consult the documentation to learn <a href="https://github.com/gfscott/eleventy-plugin-embed-everything#configure-which-embed-services-are-active" target="_blank">how to customize which services you use</a>.</p><div class="grid five"><figure><picture><source type="image/avif" srcset="/img/instagram-ZAyDBZX9J8zh-512w.avif 512w" sizes="100vw"><source type="image/webp" srcset="/img/instagram-ZAyDBZX9J8zh-512w.webp 512w" sizes="100vw"><img loading="lazy" decoding="async" src="/img/instagram-ZAyDBZX9J8zh-512w.png" alt="Instagram" width="512" height="512"></picture><figcaption>Instagram (<a href="https://npmjs.com/package/eleventy-plugin-embed-instagram" target="_blank">src</a>)</figcaption></figure><figure><picture><source type="image/avif" srcset="/img/soundcloud-8CWDhz3Bgzzg-640w.avif 640w, /img/soundcloud-8CWDhz3Bgzzg-928w.avif 928w" sizes="100vw"><source type="image/webp" srcset="/img/soundcloud-8CWDhz3Bgzzg-640w.webp 640w, /img/soundcloud-8CWDhz3Bgzzg-928w.webp 928w" sizes="100vw"><img loading="lazy" decoding="async" src="/img/soundcloud-8CWDhz3Bgzzg-640w.png" alt="SoundCloud" width="928" height="567" srcset="/img/soundcloud-8CWDhz3Bgzzg-640w.png 640w, /img/soundcloud-8CWDhz3Bgzzg-928w.png 928w" sizes="100vw"></picture><figcaption>SoundCloud (<a href="https://npmjs.com/package/eleventy-plugin-embed-soundcloud" target="_blank">src</a>)</figcaption></figure><figure><picture><source type="image/avif" srcset="/img/spotify-N_TtwJ8Z9Hzk-640w.avif 640w, /img/spotify-N_TtwJ8Z9Hzk-928w.avif 928w" sizes="100vw"><source type="image/webp" srcset="/img/spotify-N_TtwJ8Z9Hzk-640w.webp 640w, /img/spotify-N_TtwJ8Z9Hzk-928w.webp 928w" sizes="100vw"><img loading="lazy" decoding="async" src="/img/spotify-N_TtwJ8Z9Hzk-640w.png" alt="Spotify" width="928" height="278" srcset="/img/spotify-N_TtwJ8Z9Hzk-640w.png 640w, /img/spotify-N_TtwJ8Z9Hzk-928w.png 928w" sizes="100vw"></picture><figcaption>Spotify (<a href="https://npmjs.com/package/eleventy-plugin-embed-spotify" target="_blank">src</a>)</figcaption></figure><figure><picture><source type="image/avif" srcset="/img/tiktok-0Mg_eNx2hV7N-600w.avif 600w" sizes="100vw"><source type="image/webp" srcset="/img/tiktok-0Mg_eNx2hV7N-600w.webp 600w" sizes="100vw"><img loading="lazy" decoding="async" src="/img/tiktok-0Mg_eNx2hV7N-600w.png" alt="TikTok" width="600" height="140"></picture><figcaption>TikTok (<a href="https://npmjs.com/package/eleventy-plugin-embed-tiktok" target="_blank">src</a>)</figcaption></figure><figure><picture><source type="image/avif" srcset="/img/twitch-cOwmnVJt9LAK-640w.avif 640w, /img/twitch-cOwmnVJt9LAK-928w.avif 928w" sizes="100vw"><source type="image/webp" srcset="/img/twitch-cOwmnVJt9LAK-640w.webp 640w, /img/twitch-cOwmnVJt9LAK-928w.webp 928w" sizes="100vw"><img loading="lazy" decoding="async" src="/img/twitch-cOwmnVJt9LAK-640w.png" alt="Twitch" width="928" height="310" srcset="/img/twitch-cOwmnVJt9LAK-640w.png 640w, /img/twitch-cOwmnVJt9LAK-928w.png 928w" sizes="100vw"></picture><figcaption>Twitch (<a href="https://npmjs.com/package/eleventy-plugin-embed-twitch" target="_blank">src</a>)</figcaption></figure><figure><picture><source type="image/avif" srcset="/img/twitter-eLbbugPMH4pU-266w.avif 266w" sizes="100vw"><source type="image/webp" srcset="/img/twitter-eLbbugPMH4pU-266w.webp 266w" sizes="100vw"><img loading="lazy" decoding="async" src="/img/twitter-eLbbugPMH4pU-266w.png" alt="Twitter" width="266" height="239"></picture><figcaption>Twitter (<a href="https://npmjs.com/package/eleventy-plugin-embed-twitter" target="_blank">src</a>)</figcaption></figure><figure><picture><source type="image/avif" srcset="/img/vimeo-gTTzRKZo5VRk-640w.avif 640w, /img/vimeo-gTTzRKZo5VRk-826w.avif 826w" sizes="100vw"><source type="image/webp" srcset="/img/vimeo-gTTzRKZo5VRk-640w.webp 640w, /img/vimeo-gTTzRKZo5VRk-826w.webp 826w" sizes="100vw"><img loading="lazy" decoding="async" src="/img/vimeo-gTTzRKZo5VRk-640w.png" alt="Vimeo" width="826" height="234" srcset="/img/vimeo-gTTzRKZo5VRk-640w.png 640w, /img/vimeo-gTTzRKZo5VRk-826w.png 826w" sizes="100vw"></picture><figcaption>Vimeo (<a href="https://npmjs.com/package/eleventy-plugin-vimeo-embed" target="_blank">src</a>)</figcaption></figure><figure><picture><source type="image/avif" srcset="/img/youtube-3-xriHf73fX8-640w.avif 640w" sizes="100vw"><source type="image/webp" srcset="/img/youtube-3-xriHf73fX8-640w.webp 640w" sizes="100vw"><img loading="lazy" decoding="async" src="/img/youtube-3-xriHf73fX8-640w.png" alt="YouTube" width="640" height="143"></picture><figcaption>YouTube (<a href="https://npmjs.com/package/eleventy-plugin-youtube-embed" target="_blank">src</a>)</figcaption></figure><figure><picture><source type="image/avif" srcset="/img/under-construction-uXHUfAlkGUun-266w.avif 266w" sizes="100vw"><source type="image/webp" srcset="/img/under-construction-uXHUfAlkGUun-266w.webp 266w" sizes="100vw"><img loading="lazy" decoding="async" src="/img/under-construction-uXHUfAlkGUun-266w.gif" alt="Geocities-style “under construction” GIF" width="266" height="266"></picture><figcaption>And more to come</figcaption></figure></div></section><section class="install"><h2>Install and configure</h2><p>Install in your Eleventy project using npm:</p><code>$ npm i eleventy-plugin-embed-everything</code><p>Configure Eleventy to use the plugin with your <span style="font-family:monospace">.eleventy.js</span> config file:</p><code><pre>const embeds = require("eleventy-plugin-embed-everything"); module.exports = function(eleventyConfig) { // (...other Eleventy configuration settings...) eleventyConfig.addPlugin(embeds); }; </pre></code></section><footer class="credits"><p>Total downloads, all packages combined: <span id="downloads"></span></p><p>© 2022 <a href="https://gfscott.com">Graham F. Scott</a>. All source code: <a href="https://github.com/gfscott/eleventy-plugin-embed-everything/blob/master/LICENSE">MIT License</a>. This page: <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a>. All trademarks are property of their respective owners.</p></footer></main><script>let v=document.querySelector("#version"),dl=((async()=>{var e=await fetch("https://img.shields.io/npm/v/eleventy-plugin-embed-everything.json").then(e=>e.json());e&&(v.innerHTML=await e.value,v.classList.add("loaded"))})(),document.querySelector("#downloads"));(async()=>{var e=await fetch("https://embed-count.gfscott.workers.dev/").then(e=>e.json());dl.innerHTML=""+e.totalDownloads.toLocaleString("en-CA"),dl.classList.add("loaded")})()</script><script>((d,l)=>{function i(e,t,o,n,i,r,a){var c="https://www.google-analytics.com/collect",e=(e=>{var t,o=[];for(t in e)e.hasOwnProperty(t)&&void 0!==e[t]&&o.push(v(t)+"="+v(e[t]));return o.join("&")})({v:"1",ds:"web",aip:l.anonymizeIp?1:void 0,tid:"UA-542016-5",cid:(p.cid||(p.cid=h()),p.cid),t:e||"pageview",sd:l.colorDepth&&screen.colorDepth?screen.colorDepth+"-bits":void 0,dr:s.referrer||void 0,dt:s.title,dl:s.location.origin+s.location.pathname+s.location.search,ul:l.language?(u.language||"").toLowerCase():void 0,de:l.characterSet?s.characterSet:void 0,sr:l.screenSize?(d.screen||{}).width+"x"+(d.screen||{}).height:void 0,vp:l.screenSize&&d.visualViewport?(d.visualViewport||{}).width+"x"+(d.visualViewport||{}).height:void 0,ec:t||void 0,ea:o||void 0,el:n||void 0,ev:i||void 0,exd:r||void 0,exf:void 0!==a&&0==!!a?0:void 0});u.sendBeacon?u.sendBeacon(c,e):((t=new XMLHttpRequest).open("POST",c,!0),t.send(e))}var t=d.history,s=document,u=navigator||{},p=localStorage,v=encodeURIComponent,o=t.pushState,h=function(){return Math.random().toString(36)};t.pushState=function(e){return"function"==typeof t.onpushstate&&t.onpushstate({state:e}),setTimeout(i,l.delay||10),o.apply(t,arguments)},i(),d.ma={trackEvent:function(e,t,o,n){return i("event",e,t,o,n)},trackException:function(e,t){return i("exception",null,null,null,null,e,t)}}})(window,{anonymizeIp:!0,colorDepth:!0,characterSet:!0,screenSize:!0,language:!0})</script></body></html>