Pattern Library

<div
  class="
    flex flex-col gap-2 mb-10

    relative max-w-[600px]

    group

    text-center rounded cursor-pointer
  "
  id="ytVideo{{ video_id }}PosterContainer"
>
  <img
    src="{{ image_source }}"
    alt="{{ image_alt }}"
    class="
      object-cover mb-2 aspect-video rounded opacity-50 duration-200

      group-hover:blur-sm
    "
  >

  <div
    class="absolute top-0 left-0 flex justify-center items-center w-full h-full"
  >
    <div class="relative">
      <i
        class="
          relative text-red-600 ico--youtube text-7xl z-10 duration-200

          group-hover:text-8xl
        "
      ></i>

      <div class="absolute top-[30%] left-[30%] w-10 h-8 bg-white z-0"></div>
    </div>
  </div>

  <small class="font-bold">
    Spuštěním videa dojde k načtení obsahu třetích stran z portálu YouTube.
  </small>
</div>

<div
  class="content-block aspect-video mb-10 max-w-[600px]"
  id="ytVideo{{ video_id }}IframeContainer"
  style="display: none"
>

</div>

{# Script, který při kliknutí na poster načte iframe s YouTube videem (v Enhanced Privacy Mode) #}
{# Záměrně je přímo na bloku, protože málokterý článek bude mít více videí a naopak většina článků YT videa nemá #}
<script>
  (function () {
    const posterContainer = document.getElementById('ytVideo{{ video_id }}PosterContainer')
    const videoContainer = document.getElementById('ytVideo{{ video_id }}IframeContainer')

    posterContainer.onclick = function () {
      videoContainer.innerHTML = '<iframe class="rounded w-full h-full !border-0" src="https://www.youtube-nocookie.com/embed/{{ video_id }}?autoplay=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>'

      videoContainer.style.display = 'block'
      posterContainer.style.display = 'none'
    }
  })()
</script>