<div class="youtube" data-controller="youtube">
<div class="youtube__preview">
<div class="frame frame--16by9">
<img data-src="https://img.youtube.com/vi/zVypkD2v7hA/sddefault.jpg" srcset="/placeholder/800x600.jpg 740w,/placeholder/1200x800.jpg 1000w" alt="" decoding="async" loading="lazy" class="img-fluid lazy" width=210 height=210>
</div>
<button class="youtube__button">
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 0 68 48" width="68">
<path class="youtube__svg" d="m66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19-5.31-1.42-27.1-1.55-27.1-1.55s-21.79.13-27.1 1.55c-2.93.78-4.63 3.26-5.42 6.19-1.42 5.31-1.48 16.26-1.48 16.26s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19 5.31 1.42 27.1 1.55 27.1 1.55s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19 1.42-5.31 1.48-16.26 1.48-16.26s-.06-10.95-1.48-16.26z" fill="#212121" fill-opacity=".8" />
<path d="m45 24-18-10v20" fill="#fff" />
</svg>
<span class="visually-hidden">Zum Aktivieren des Videos klicken</span>
</button>
<div class="youtube__info">Wir weisen darauf hin, dass nach der Aktivierung Daten an YouTube und von YouTube eingebundene weitere Anbieter wie Google übermittelt werden.</div>
</div>
<div class="youtube__video">
<div class="frame frame--16by9" data-embed="zVypkD2v7hA"></div>
</div>
</div>
<div class="youtube" data-controller="youtube">
<div class="youtube__preview">
<div class="frame frame--{{ ratio }}">
{% include '@image' with {
'lazy': true,
'image': {
'src': 'https://img.youtube.com/vi/' ~ id ~ '/sddefault.jpg'
},
} %}
</div>
<button class="youtube__button">
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 0 68 48" width="68">
<path
class="youtube__svg"
d="m66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19-5.31-1.42-27.1-1.55-27.1-1.55s-21.79.13-27.1 1.55c-2.93.78-4.63 3.26-5.42 6.19-1.42 5.31-1.48 16.26-1.48 16.26s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19 5.31 1.42 27.1 1.55 27.1 1.55s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19 1.42-5.31 1.48-16.26 1.48-16.26s-.06-10.95-1.48-16.26z"
fill="#212121"
fill-opacity=".8" />
<path d="m45 24-18-10v20" fill="#fff" />
</svg>
<span class="visually-hidden">Zum Aktivieren des Videos klicken</span>
</button>
<div class="youtube__info">Wir weisen darauf hin, dass nach der Aktivierung Daten an YouTube und von YouTube eingebundene weitere Anbieter wie Google übermittelt werden.</div>
</div>
<div class="youtube__video">
<div class="frame frame--{{ ratio }}" data-embed="{{ id }}"></div>
</div>
</div>
{
"id": "zVypkD2v7hA",
"ratio": "16by9"
}