Front W - Pattern Library

YouTube Embed 

<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"
}