Die hier dargestellte Transparenz bezieht sich speziell auf den iFrame (das enthaltende Webelement), nicht auf die Transparenz der hochgeladenen Videos. Vimeo bietet derzeit keine Unterstützung für Alphakanäle.
In diesem Artikel:
- Transparenter Hintergrund
- Den transparenten Hintergrund deaktivieren
- Eine benutzerdefinierte iFrame-Hintergrundfarbe anwenden
Transparenter Hintergrund
Standardmäßig ist der Hintergrund des Player-iframe auf Vimeo transparent. Alle Player-Elemente (Playleiste, Buttons usw.) werden an das Videobild angeheftet, nicht an die tatsächliche Größe des iframe.
Damit in einer Einbettung kein Leerraum entsteht, empfiehlt es sich, eine Playergröße zu wählen, die dem ursprünglichen Seitenverhältnis des Videos entspricht. Wenn das Originalvideo z. B. ein Seitenverhältnis von 16:9 hat, solltest du das Video mit Abmessungen einbetten, die ein Seitenverhältnis von 16:9 ergeben, wie z. B. 800 x 450.
⚠️Hinweis: Die Abmessungen des eingebetteten Players können auch durch das von deiner Webseite festgelegte CSS-Styling beeinflusst werden. Achte bei Videos, die in einem responsiven Design eingebettet sind, darauf, dass sowohl die Höhe als auch die Breite so angepasst werden, dass das native Seitenverhältnis des Videos beibehalten wird.
Den transparenten Hintergrund deaktivieren
Wenn dein Player anders angezeigt wird, als du es ursprünglich beabsichtigt hattest, kannst du den transparenten Hintergrund deaktivieren.
- Um den transparenten Hintergrund zu deaktivieren, füge ?transparent=0 am Ende der Player-URL im Einbettungscode hinzu. Mit diesem Parameter wird ein schwarzer iFrame-Hintergrund erzwungen und die Player-Elemente werden anstelle des Videobildes an den iFrame angeheftet.
Beispiel Einbettungscode:
<iframe src="https://player.vimeo.com/video/137805268?transparent=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
⚠️ Hinweis: Wenn du für dein Video die Privatsphäreeinstellung Nicht gelistet gewählt hast, muss der beliebige andere Parameter nach dem Privatsphäre-Hash (?h=913052c8ff) am Ende der URL mit & anstelle von ? hinzugefügt werden. Hier ist ein Beispiel für den iFrame-Code eines nicht gelisteten Videos unter Verwendung des transparenten Parameters:
<iframe src="https://
player.vimeo.com/
Eine benutzerdefinierte iFrame-Hintergrundfarbe anwenden
Anstelle von transparenten oder schwarzen Balken kannst du eine Farbe wählen, die den iframe ausfüllt. Zur Anpassung der Farbe des Textes und der Playleiste im Player musst du allerdings die Player-Einstellungen deines Videos aufrufen.
- Für eine bestimmte Hintergrundfarbe musst du die folgende Inline-Stil-Eigenschaft zu deinem iframe-Einbettungscode hinzufügen:
style="background-color: #FFFFFF"
FFFFFF ist der Hexadezimalwert für Weiß, du kannst aber auch in der Hex-Code-Datenbank nach deiner gewünschten Farbe suchen: http://www.color-hex.com/
Beispiel für Einbettungscode:
<iframe src="https://player.vimeo.com/video/236787722" style="background-color: #FFFFFF" width="1000" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
⚠️Hinweis: Die Farbe des Rahmens, der beim Laden des Videos erscheint, kann nicht geändert werden. Den meisten Zuschauern sollte dies nicht weiter auffallen, Zuschauer mit langsameren Internetverbindungen könnten jedoch beeinträchtigt sein.