Front W - Pattern Library

Video 

<div class="video" data-controller="video">
    <video controls preload="none" poster="/placeholder/campus_preview.jpg" class="lazy">
        <source data-src="/placeholder/campus.mp4">
        Ihr Browser unterstützt dieses Video-Element nicht.
    </video>

</div>
 
<div class="video" data-controller="video"{{ loop ? ' data-video-type-value="loop"' }}>
  <video{% if controls %} controls{% endif %}{% if autoplay %} autoplay playsinline{% endif %}{% if loop %} loop{% endif %}{% if muted %} muted{% endif %}{% if preload %} preload="{{ preload }}"{% endif %}{% if poster %} poster="{{ poster }}"{% endif %}{% if lazy %} class="lazy"{% endif %}>
    <source {{ lazy ? 'data-' }}src="{{ video }}">
    Ihr Browser unterstützt dieses Video-Element nicht.
  </video>
  
  {% if loop %}
  <div class="video__controls">
    <button class="btn video__play" type="button" aria-label="Video abspielen">{% include '@icon' with { 'type': 'i-play' } %}</button>
    <button class="btn video__pause" type="button" aria-label="Video pausieren">{% include '@icon' with { 'type': 'i-pause' } %}</button>
  </div>
  {% endif %}
</div>
 
{
  "video": "/placeholder/campus.mp4",
  "poster": "/placeholder/campus_preview.jpg",
  "preload": "none",
  "autoplay": false,
  "controls": true,
  "lazy": true
}