Ein Produktvideo auf der Landingpage einbinden (Autoplay, Größe, Platzierung)
Ein Produktvideo oben auf der Landingpage zeigt Besuchern, was Sie tun, bevor sie ein Wort lesen. Damit es überall automatisch startet, ohne die Seite zu bremsen, braucht es ein paar konkrete Entscheidungen.
Das Muster wählen
| Muster | Gut für |
|---|---|
| Stumme Autoplay-Schleife im Hero | Ein Motion-Video von 15 bis 30 Sekunden, ohne Ton und ohne Bedienelemente. |
| Vorschaubild mit Play-Button | Eine Demo von einer bis zwei Minuten mit Sprecher, bei der der Ton zählt. |
| Beides | Die Schleife oben, die erklärte Demo weiter unten. |
Die Autoplay-Regeln
Chrome sagt es knapp: „Muted autoplay is always allowed“, Autoplay mit Ton dagegen nur unter Bedingungen wie einer vorherigen Interaktion (Chrome for Developers). MDN beschreibt dieselbe Regel browserübergreifend und weist darauf hin, dass Safari für Autoplay zusätzlich playsinline braucht (MDN Web Docs). Eine Hero-Schleife muss also muted und playsinline sein, ein Video mit Ton wartet auf einen Klick.
Der Code
<video src="/produkt.mp4" poster="/produkt.jpg"
autoplay muted loop playsinline preload="metadata"></video>Das Poster erscheint sofort, während das Video lädt, und preload="metadata" verhindert, dass die ganze Datei vorab geladen wird.
Leicht halten
- Video statt GIF. Im Beispiel von web.dev wurde aus einem GIF mit 3,7 MB ein MP4 mit 551 KB und ein WebM mit 341 KB (web.dev).
- Tonspur entfernen und skalieren. Mit ffmpeg etwa
ffmpeg -i video.mp4 -an -vf scale=1280:-2 -c:v libx264 -crf 26 -preset slow -movflags +faststart hero.mp4. - Für längere Videos mit Ton einen Video-Host wie Wistia, Vimeo oder YouTube nutzen.
Platzierung und Länge
- Die Überschrift bleibt sichtbar; das Video unterstützt sie, statt sie nach unten zu schieben.
- Format 16:9, und auf dem Handy nichts Wichtiges abschneiden.
- Kurz halten: Unter einer Minute ist das Engagement bei Wistia am höchsten (Wistia).
Noch kein Video? Teasr macht aus Ihrer Landingpage in etwa 10 Minuten ein MP4 in 1920 x 1080, in Ihrem Branding und mit Ihren echten Screens, ab 19,50 €. Die Musik entfernen Sie für die stumme Schleife mit dem Befehl oben.