Erscheinungsbild
Video mit Parallax
Ein vollbreites Video-Band mit sanftem Parallax-Effekt — die bewegte Variante des Parallax-Zitats. Geeignet für einen atmosphärischen Moment in der Erlebniswelt: ein kurzer Bewegtbild-Ausschnitt statt eines Fotos, darüber Eyebrow, Headline, Einleitungstext und optionaler CTA-Link.
Suchmaschinen und Screenreader für blinde und sehbehinderte Besucher orientieren sich an der Reihenfolge der Überschriften auf einer Seite, nicht an ihrer optischen Größe. Deshalb lässt sich bei manchen Elementen die Überschriften-Ebene gezielt einstellen.
Element einfügen
- In der Erlebniswelt eine Section anlegen und den Block „Video mit Parallax" hinzufügen (Kategorie „Boutique Theme"). Der Block ist standardmäßig volle Breite.
- Im Block sitzt das gleichnamige Element — rechts öffnet sich seine Konfiguration mit den Reitern „Video", „Inhalt" und „Call-to-Action".
Einstellungen
| Bereich | Feld | Wirkung |
|---|---|---|
| Video | Video | Die Videodatei (MP4 oder WebM) per Drag & Drop oder Medien-Auswahl. |
| Video | Standbild (Poster) | Bild, das angezeigt wird, bis das Video geladen ist — und als Ersatzbild, wenn kein Video hinterlegt ist. |
| Video | Wiedergabe | Automatisch abspielen (stumm) oder Erst auf Klick (mit Ton). |
| Video | Video wiederholen | Schaltet die Endlosschleife ein oder aus. |
| Video | Position des Play-Buttons | Wo der Button zum Starten des Videos im Band sitzt — von Oben links bis Unten rechts, neun Positionen zur Auswahl. Standard ist die Mitte. Wirkt nur bei „Erst auf Klick", da im Modus „Automatisch abspielen" kein Play-Button erscheint. |
| Video | Bandhöhe | Höhe des Videobands: 25 %, 33 %, 40 %, 50 %, 66 % (Standard), 75 % oder 100 % der Bildschirmhöhe. |
| Video | Bandhöhe (Mobil) | Eigene Höhe für Handys. Wie Desktop (Standard) übernimmt den Wert von oben. Im Video-Seitenverhältnis richtet die Höhe des Bands nach dem Video: es ist dann vollständig zu sehen, statt links und rechts angeschnitten zu werden. |
| Video | Parallax-Effekt | Ein- oder ausgeschaltet (Standard: an). Ausgeschaltet steht das Video fest im Band, ohne sich beim Scrollen zu bewegen. |
| Video | Parallax-Geschwindigkeit | Wie weit das Video beim Scrollen wandert: Langsam (dezent), Mittel (Standard) oder Schnell (deutlich). Wirkt nur bei eingeschaltetem Parallax-Effekt. |
| Video | Parallax-Richtung | Bewegungsrichtung beim Herunterscrollen: nach unten (Standard) oder nach oben. |
| Video | Textfarbe | Hell (Standard) oder Dunkel — je nachdem, wie hell oder dunkel das Video ist. |
| Inhalt | Eyebrow (kleine Zeile) | Optionaler Text über der Headline. |
| Inhalt | Headline | Mehrzeilen möglich. |
| Inhalt | Überschriften-Ebene | Legt fest, als welche Überschrift der Text im Seitenaufbau zählt (h1 bis h3). Die Schriftgröße ändert sich dadurch nicht. Faustregel: pro Seite genau eine h1 — auf Produktseiten ist das der Produktname, auf allen anderen die wichtigste Überschrift der Seite. |
| Inhalt | Headline-Größe | Display (groß) oder Klein. |
| Inhalt | Einleitungstext | Kurzer Fließtext unter der Headline. |
| Call-to-Action | CTA-Beschriftung / CTA-Link | Button unter dem Text — erscheint nur, wenn beide Felder gesetzt sind. |
Was im Frontend passiert
- Wie beim Parallax-Zitat bewegt sich das Video beim Scrollen sanft vertikal — automatisch deaktiviert, wenn der Besucher „Bewegung reduzieren" in seinem Betriebssystem eingestellt hat. In diesem Fall verhält sich das Band wie im Modus „Erst auf Klick": Der Besucher startet das Video selbst, statt dass es von selbst anläuft.
- Automatisches Abspielen ist technisch nur ohne Ton möglich — Browser verhindern lautes Autoplay grundsätzlich. Im Modus „Automatisch abspielen" läuft das Video deshalb immer stumm, startet, sobald das Band in den sichtbaren Bereich scrollt, und pausiert wieder, sobald es aus dem Bild verschwindet. Möchtest du, dass Besucher das Video mit Ton erleben, wähle „Erst auf Klick" — dort startet die Wiedergabe erst durch den Klick des Besuchers und ist dann von Anfang an mit Ton.
- In beiden Modi lässt sich das Video jederzeit über ein Bedienelement anhalten und fortsetzen; im Klick-Modus kommt ein Ton-Schalter dazu.
- Im Modus „Erst auf Klick" lädt der Browser die Videodatei erst, wenn der Besucher tatsächlich klickt — bis dahin ist nur das Standbild zu sehen. Ist Bandhöhe (Mobil) → Im Video-Seitenverhältnis gewählt, holt sich der Browser auf dem Handy vorab ein paar Kilobyte an Informationen zum Video (nicht die Datei selbst), damit das Band von Anfang an die richtige Höhe hat.
- Ein Standbild (Poster) solltest du immer hinterlegen. Ohne Poster bleibt die Fläche leer, bis das Video geladen hat — auf einer langsamen Verbindung kann das kurz eine leere Fläche zeigen. Ist zusätzlich gar kein Video gewählt, degradiert das Band zum reinen Standbild; ohne Video und ohne Poster bleibt die Fläche komplett leer, die Texte erscheinen aber trotzdem.
- Passt der Text nicht in die gewählte Bandhöhe, wächst das Band automatisch mit — es wird nie etwas abgeschnitten.
- Querformat-Videos auf dem Handy: Ein breites Video in einem hohen Band wird links und rechts beschnitten — auf einem Telefon fällt das besonders auf. Die Einstellung Bandhöhe (Mobil) → Im Video-Seitenverhältnis löst das: das Band ist dann mindestens so hoch, wie es das Seitenverhältnis des Videos verlangt — braucht der Text mehr Platz, wächst das Band, und es entstehen schmale Balken statt eines Beschnitts. Es geht so oder so nichts verloren. Der Parallax-Effekt ruht in diesem Modus auf dem Handy, weil das Video das Band randlos ausfüllt und sich nicht mehr verschieben lässt. Auf dem Desktop bleibt er unverändert.
Dateigröße im Blick behalten
Das Video wird vollflächig eingebunden und lädt (je nach Modus) automatisch mit. Halte die Datei daher möglichst klein — eine kurze Sequenz in mittlerer Auflösung, komprimiert als MP4, reicht für den Bildschirm-Ausschnitt meist aus und lädt spürbar schneller als eine lange oder hochauflösende Datei.
CTA nur mit beiden Feldern
Trägst du nur die Beschriftung oder nur den Link ein, erscheint kein Button — beide Felder müssen befüllt sein.
Mediathek nimmt die Datei nicht an?
Lehnt die Medien-Auswahl eine Videodatei ab, liegt das an den erlaubten Dateiendungen in den Shop-Grundeinstellungen, nicht am Element selbst — dort lässt sich MP4/WebM bei Bedarf freigeben.