Video @video

In Development

Variants

Default @video

Vorschau in eignem Tab anzeigen
 
<div class="video loading" style="padding-top: 56.25%;"><video class="video__video js-lazyload lazyload" width="640" height="360" preload="none" poster="https://bildermangel.de/640x360/6E7180/8E919B.png?text=640x360 Poster" muted="muted" autoplay="autoplay" loop="loop" id="video--51cb" playsinline="playsinline">
    <source src="/images/video/big_buck_bunny.mp4" type="video/mp4" />
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />Ihr Browser unterstützt kein HTML5 video.</video><button class="icon-button video__button" type="button" aria-controls="video--51cb"><svg class="icon icon--play icon-button__icon video__play" viewBox="0 0 200 200" role="img" aria-labelledby="icon-77de-title">
      <title id="icon-77de-title">Video abspielen</title>
      <use xlink:href="#icon-play"></use>
    </svg><svg class="icon icon--pause icon-button__icon video__pause" viewBox="0 0 200 200" role="img" aria-labelledby="icon-a7c1-title">
      <title id="icon-a7c1-title">Video pausieren</title>
      <use xlink:href="#icon-pause"></use>
    </svg></button></div>

Media Queries @video--responsive

Vorschau in eignem Tab anzeigen
 
<div class="video" style="padding-top: 41.66666666666667%;"><video class="video__video" width="1920" height="800" preload="none" poster="https://bildermangel.de/1920x800/6E7180/8E919B.png?text=1920x800 Poster" muted="muted" autoplay="autoplay" loop="loop" id="video--5959" playsinline="playsinline"><template class="video__media" data-media="(min-width: 600px)" data-width="1920" data-height="800">
      <source src="/images/video/221103_BW_stiftung_header_boot_slow_1920x800.mp4" type="video/mp4" /></template><template class="video__media" data-width="600" data-height="1066">
      <source src="/images/video/221103_BW_stiftung_header_boot_slow_600x1066.mp4" type="video/mp4" /></template>Ihr Browser unterstützt kein HTML5 video.</video><button class="icon-button video__button" type="button" aria-controls="video--5959"><svg class="icon icon--play icon-button__icon video__play" viewBox="0 0 200 200" role="img" aria-labelledby="icon-c213-title">
      <title id="icon-c213-title">Video abspielen</title>
      <use xlink:href="#icon-play"></use>
    </svg><svg class="icon icon--pause icon-button__icon video__pause" viewBox="0 0 200 200" role="img" aria-labelledby="icon-c931-title">
      <title id="icon-c931-title">Video pausieren</title>
      <use xlink:href="#icon-pause"></use>
    </svg></button></div>