Vimeo Video Showcase - Responsiver Slider und Lightbox mit automatischen Vorschaubildern

Ein Video, das zu Vimeo führt, ist ein Video, das den Verkauf kostet

Produktvideos, Tutorials und Markenclips verkaufen — aber nur, solange der Kunde noch in Ihrem Shop ist. Genau dort hält ihn dieses Modul: Die Videos stehen in einem Slider auf Ihrer Startseite, und ein Klick öffnet eine Lightbox über der Seite statt eines neuen Tabs auf vimeo.com.

Link einfügen. Das war die Einrichtung.

• 1. Kopieren Sie den Link des Videos aus der Adresszeile oder über die Teilen-Schaltfläche von Vimeo.
• 2. Fügen Sie ihn unter „Add a video“ ein und klicken Sie auf Hinzufügen. Sobald der Link erkannt wird, erscheint eine Vorschau.
• 3. Einen dritten Schritt gibt es nicht — Vorschaubild und Titel kommen automatisch von Vimeo, und der Slider ist auf Ihrer Startseite bereits live.

Lassen Sie den Titel leer, wird der Vimeo-Titel des Videos übernommen. Jedes Linkformat wird akzeptiert: vimeo.com/…, player.vimeo.com/video/…, Kanal-, Gruppen- und Showcase-Links, sogar eine reine Video-ID.

Nicht gelistete Videos, ohne sie öffentlich zu machen

Fügen Sie den vollständigen privaten Link ein — den mit dem zusätzlichen Code hinter der Nummer — und das Video läuft in Ihrem Shop, bleibt auf Vimeo aber verborgen. Genau das brauchen Sie für Tutorials, Material nur für Kunden oder alles, was für einen öffentlichen Kanal noch nicht so weit ist.

Eine Lightbox, kein Umweg

Videos öffnen sich in einer ablenkungsfreien Overlay-Ansicht, die sich per Klick oder mit der Escape-Taste schließen lässt, und laufen im Do-Not-Track-Modus von Vimeo (dnt=1). Der automatische Bildlauf des Sliders pausiert, während ein Video läuft und während der Browser-Tab im Hintergrund liegt — hinter dem Player bewegt sich also nichts.

Ein Slider, der sich auf jedem Bildschirm benimmt

Legen Sie fest, wie viele Videos am Desktop nebeneinander stehen, von einem bis acht; auf kleinen Desktop-Bildschirmen zeigt der Slider automatisch höchstens vier, auf Tablets drei und auf Smartphones zwei — mit nativem Wischen per Touch. Pfeile und Punkte sind optional und verschwinden von selbst, sobald ohnehin alle Videos auf den Bildschirm passen. Bildlaufgeschwindigkeit und Pause beim Überfahren mit der Maus sind einstellbar.

Steuerung pro Video und pro Sprache

In der Liste „Your videos“ sortieren Sie Videos mit Pfeilen nach oben und unten um, blenden eines mit einem Klick aus, bearbeiten oder löschen es. Jedes Video lässt sich auf eine einzige Shop-Sprache beschränken oder allen zeigen — praktisch, wenn ein Tutorial nur auf Deutsch existiert oder ein Kampagnenclip nur für einen Markt gedacht ist. Videos, deren Sprache später aus dem Shop entfernt wurde, werden gekennzeichnet: Sie können ihnen eine neue Sprache zuweisen, statt sie kommentarlos zu verlieren.

Leicht von Grund auf

Kein jQuery. Kein slick, kein modal-video-Plugin, keine externen Bibliotheken, kein API-Schlüssel. Eine kleine CSS-Datei und eine kleine Skriptdatei, geladen nur dann, wenn es etwas zu zeigen gibt, und mit der Modulversion gegen den Cache abgesichert — so erreichen Updates wiederkehrende Besucher auch ohne erzwungenes Neuladen.

Was Version 2.0 behoben hat

Ältere Versionen luden auf jeder Seite jQuery 1.10 von einem CDN, hängten sich sowohl an header als auch an displayHeader und luden die Dateien dadurch doppelt, ließen aus leeren URLs kaputte graue Slides entstehen und brachten eine Konfigurationsseite mit, die auf neueren PrestaShop-Versionen scheiterte. All das ist bewusst verschwunden: kein jQuery mehr, jedes Speichern validiert und weitergeleitet, und ohne gültigen Vimeo-Link lässt sich kein Video speichern. Beim Update werden Ihre vorhandenen Videos automatisch migriert — IDs werden ausgelesen, Vorschaubilder neu geholt, und jede alte Slide ohne gültiges Video bleibt erhalten und wird als Hidden markiert, statt gelöscht zu werden.

Kompatibilität

PrestaShop 1.7, 8 und 9, in acht Sprachen: Deutsch, Englisch, Französisch, Italienisch, Niederländisch, Polnisch, Spanisch und Türkisch. Bei der Installation hängt sich der Slider an displayHome, läuft aber auf jedem Anzeige-Hook, wenn Sie ihn unter Design → Positionen verschieben, und lässt sich mit {widget name='vimeoslider'} direkt in ein Template setzen. Beim Deinstallieren werden Tabelle und Einstellungen des Moduls entfernt — Ihre Videos auf Vimeo bleiben unangetastet.

Häufige Fragen

Brauche ich einen Vimeo-API-Schlüssel?

Nein. Link einfügen genügt — Vorschaubild und Titel holt sich das Modul selbst.

Kann ich nicht gelistete Videos verwenden?

Ja — fügen Sie den vollständigen privaten Link samt Code hinter der Videonummer ein, und das Video läuft in Ihrem Shop, während es auf Vimeo nicht gelistet bleibt.

Wo wird das Video abgespielt?

In einer Lightbox über Ihrer Seite, die sich per Klick oder mit der Escape-Taste schließen lässt — der Kunde verlässt den Shop also nie.

Wie viele Videos werden gleichzeitig angezeigt?

Sie wählen am Desktop zwischen einem und acht pro Reihe; Tablets und Smartphones bekommen automatisch weniger, mit Wischen per Touch.

Kann ein Video nur einer Sprache angezeigt werden?

Ja. Jedes Video lässt sich auf eine einzige Shop-Sprache beschränken oder allen zeigen.

Kann ich den Slider auch woanders als auf der Startseite platzieren?

Ja. Verschieben oder kopieren Sie ihn unter Design → Positionen auf jeden beliebigen Anzeige-Hook, oder setzen Sie ihn mit {widget name='vimeoslider'} in ein Template.

Ein Vorschaubild bleibt eine dunkle Fläche — was nun?

Vimeo hat auf die Anfrage des Moduls nicht geantwortet. Öffnen Sie das Bearbeiten-Formular des Videos, klicken Sie auf „Update video“ und prüfen Sie, ob das Video privat ist; bei nicht gelisteten Videos wird der vollständige private Link benötigt.