SCHMIDT Automotive — webheader

Web-geoptimaliseerde versies van webheader_v3, klaar om in te laden.

Bestanden

1080p (desktop)	header-1080.mp4 — 1920×1080, 11,7 MB, geen audio
720p (mobiel)	header-720.mp4 — 1280×720, 5,6 MB, geen audio
Poster	poster.jpg — 1920×1080, 210 KB

Zo plak je 'm op de site

<video class="hero-video"
       autoplay muted loop playsinline
       preload="metadata"
       poster="POSTER_URL">
  <source src="MP4_URL" type="video/mp4">
</video>

Alle vier de attributen zijn nodig. Zonder muted blokkeert elke browser de autoplay, en zonder playsinline springt iOS de video fullscreen in.

Mobiel het lichtere bestand serveren

Browsers negeren het media-attribuut op <source> bij video, dus dat werkt niet. Wel dit, vóór de </body>:

<script>
  var v = document.querySelector('.hero-video');
  if (v && window.matchMedia('(max-width: 768px)').matches) {
    v.querySelector('source').src = 'MP4_720_URL';
    v.load();
  }
</script>

CSS voor een full-bleed header

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* vult de header, snijdt bij i.p.v. vervormen */
  display: block;
}