Lazy YouTube Embed Generator

Embed YouTube videos with a lightweight, lazy-loaded placeholder which doesn't actually embed until you click, powered by youtube-embed-html.
Preview

HTML

<iframe loading="lazy" src="https://www.youtube-nocookie.com/embed/FfTT7mxGw8I?autoplay=1" srcdoc="&lt;style&gt;*{padding:0;margin:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#000}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}.play{position:absolute;inset:0;color:#fff;text-decoration:none}.button{position:absolute;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%)}.button svg{display:block;width:100%;height:100%}.top{position:absolute;top:10px;left:30px;right:30px;display:flex;min-width:0}.title{color:#fff;font:700 20px/28px Roboto,Arial,Helvetica,sans-serif;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 1px 2px #0008}a:focus-visible,.copy:focus-visible{outline:3px solid #fff;outline-offset:-3px}.gradient{position:absolute;inset:0;background:linear-gradient(#0009,transparent 100px),linear-gradient(0deg,#0006,transparent 100px);pointer-events:none}.woyt{position:absolute;z-index:2;right:30px;bottom:12px;max-width:calc(100% - 60px);height:48px;padding:0 24px;border-radius:24px;background:rgba(0,0,0,.3);color:#fff;text-decoration:none;box-sizing:border-box}.woyt&gt;div{display:flex;align-items:center;justify-content:center;height:100%}.woyt-text{font:400 18px/1 Roboto,Arial,Helvetica,sans-serif;white-space:nowrap}.woyt-logo{width:90px;height:20px;flex-shrink:0}.woyt-logo svg{display:block;width:100%;height:100%}.woyt:hover{background:rgba(40,40,40,.6)}@media(max-width:360px){.woyt{right:12px;max-width:calc(100% - 24px)}}@media(max-width:360px){.top{left:12px;right:12px}.title{font-size:18px;line-height:24px}}&lt;/style&gt;&lt;a href=&quot;https://www.youtube.com/watch?v=FfTT7mxGw8I&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot; aria-label=&quot;Watch on YouTube&quot; class=&quot;woyt&quot;&gt;&lt;div aria-hidden=&quot;true&quot;&gt;&lt;div class=&quot;woyt-text&quot;&gt;Watch on&lt;/div&gt;&lt;div class=&quot;woyt-logo&quot;&gt;&lt;svg viewBox=&quot;0 0 110 26&quot;&gt;&lt;use href=&quot;#a&quot; style=&quot;stroke-width:2px;stroke:#000;stroke-opacity:.15;stroke-linejoin:round&quot;/&gt;&lt;path id=&quot;a&quot; fill=&quot;#fff&quot; d=&quot;M16.68.99c-3.13.04-9.66.17-11.69.69-1.49.4-2.59 1.6-2.99 3-.69 2.7-.68 8.31-.68 8.31S1.31 18.6 2 21.3c.39 1.5 1.59 2.6 2.99 3 2.69.7 13.4.68 13.4.68s10.7.01 13.4-.68c1.5-.4 2.59-1.6 2.99-3 .69-2.7.68-8.31.68-8.31s.11-5.61-.68-8.31c-.4-1.5-1.59-2.6-2.99-3C29.11.98 18.4.99 18.4.99s-.67-.01-1.71 0zm72.21.9v21.28h2.78l.31-1.37h.09c.3.5.71.88 1.21 1.18.5.3 1.08.4 1.68.4 1.1 0 1.99-.49 2.49-1.59.5-1.1.81-2.7.81-4.9v-2.4c0-1.6-.11-2.9-.31-3.9-.2-.89-.5-1.59-1-2.09-.5-.4-1.1-.59-1.9-.59-.59 0-1.18.19-1.68.49-.49.3-1.01.8-1.21 1.4V1.9h-3.28zm-49.99.78 3.9 13.9.18 6.71h3.31v-6.71l3.87-13.9h-3.37l-1.4 6.31c-.4 1.89-.71 3.19-.81 3.99h-.09c-.2-1.1-.51-2.4-.81-3.99l-1.37-6.31h-3.4zm29.59 0v2.71h3.4v17.9h3.28V5.38h3.4s0-2.71-.09-2.71h-9.99zM15 7.79l8.9 5.18-8.9 5.09V7.78zm89.4.09c-1.7 0-2.89.59-3.59 1.59-.69.99-.99 2.6-.99 4.9v2.59c0 2.2.3 3.9.99 4.9.7 1.1 1.8 1.59 3.5 1.59 1.4 0 2.38-.3 3.18-1 .7-.7 1.09-1.69 1.09-3.09v-.5l-2.9-.21c0 1-.08 1.6-.28 2-.1.4-.5.62-1 .62-.3 0-.61-.11-.81-.31-.2-.3-.3-.59-.4-1.09-.1-.5-.09-1.21-.09-2.21v-.78l5.71-.09v-2.62c0-1.6-.1-2.78-.4-3.68-.2-.89-.71-1.59-1.31-1.99-.7-.4-1.48-.59-2.68-.59zm-50.49.09c-1.09 0-2.01.18-2.71.68-.7.4-1.2 1.12-1.49 2.12-.3 1-.5 2.27-.5 3.87v2.21c0 1.5.1 2.78.4 3.78.2.9.7 1.62 1.4 2.12.69.5 1.71.68 2.81.78 1.19 0 2.08-.28 2.78-.68.69-.4 1.09-1.09 1.49-2.09.39-1 .49-2.3.49-3.9v-2.21c0-1.6-.2-2.87-.49-3.87-.3-.89-.8-1.62-1.49-2.12-.7-.5-1.58-.68-2.68-.68zm12.18.09v11.9c-.1.3-.29.48-.59.68-.2.2-.51.31-.81.31-.3 0-.58-.1-.68-.4-.1-.3-.18-.7-.18-1.4V8.16h-3.4v11.21c0 1.4.18 2.39.68 3.09.49.7 1.21 1 2.21 1 1.4 0 2.48-.69 3.18-2.09h.09l.31 1.78h2.59V8.16s-3.4 0-3.4-.09zm17.31 0v11.9c-.1.3-.29.48-.59.68-.2.2-.51.31-.81.31-.3 0-.58-.1-.68-.4-.1-.3-.21-.7-.21-1.4V8.16h-3.4v11.21c0 1.4.21 2.39.71 3.09.5.7 1.18 1 2.18 1 1.39 0 2.51-.69 3.21-2.09h.09l.28 1.78h2.62V8.16s-3.4 0-3.4-.09zm20.9 2.09c.4 0 .58.11.78.31.2.3.3.59.4 1.09.1.5.09 1.21.09 2.21v1.09h-2.5v-1.09c0-1 0-1.71.09-2.21 0-.4.11-.8.31-1 .2-.3.51-.4.81-.4zm-50.49.12c.5 0 .8.18 1 .68.19.5.28 1.3.28 2.4v4.68c0 1.1-.08 1.9-.28 2.4s-.5.68-1 .68-.79-.18-.99-.68c-.2-.5-.31-1.3-.31-2.4v-4.68c0-1.1.11-1.9.31-2.4s.49-.68.99-.68zm39.68.09c.3 0 .61.1.81.4.2.3.27.67.37 1.37.1.6.12 1.51.12 2.71l.09 1.9c0 1.1 0 1.99-.09 2.59-.1.6-.19 1.08-.49 1.28-.2.3-.5.4-.9.4-.3 0-.51-.08-.81-.18-.2-.1-.39-.29-.59-.59v-8.5c.1-.4.29-.7.59-1 .3-.3.6-.4.9-.4z&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;a class=&quot;play&quot; href=&quot;https://www.youtube-nocookie.com/embed/FfTT7mxGw8I?autoplay=1&quot; aria-label=&quot;Play Just Curious - Limmy&amp;#39;s Homemade Show&quot;&gt;&lt;img src=&quot;https://i.ytimg.com/vi/FfTT7mxGw8I/hqdefault.jpg&quot; alt=&quot;Just Curious - Limmy&amp;#39;s Homemade Show&quot; loading=&quot;lazy&quot;&gt;&lt;div class=&quot;gradient&quot;&gt;&lt;/div&gt;&lt;div class=&quot;top&quot;&gt;&lt;div class=&quot;title&quot;&gt;Just Curious - Limmy&amp;#39;s Homemade Show&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;button&quot;&gt;&lt;svg viewBox=&quot;0 0 67 60&quot; aria-hidden=&quot;true&quot;&gt;&lt;path fill=&quot;#f03&quot; d=&quot;M63 14.87a7.885 7.885 0 00-5.56-5.56C52.54 8 32.88 8 32.88 8S13.23 8 8.32 9.31c-2.7.72-4.83 2.85-5.56 5.56C1.45 19.77 1.45 30 1.45 30s0 10.23 1.31 15.13c.72 2.7 2.85 4.83 5.56 5.56C13.23 52 32.88 52 32.88 52s19.66 0 24.56-1.31c2.7-.72 4.83-2.85 5.56-5.56C64.31 40.23 64.31 30 64.31 30s0-10.23-1.31-15.13z&quot;/&gt;&lt;path fill=&quot;#fff&quot; d=&quot;M26.6 39.43L42.93 30 26.6 20.57z&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;&lt;/a&gt;" title="Just Curious - Limmy&#39;s Homemade Show" allow="accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture" allowfullscreen="" frameborder="0" style="width:100%;aspect-ratio:1.7777777777777777"></iframe>