Video - Webflow Hilfe
Das Videoelement ermöglicht es Ihnen, ein Video, das auf einer Drittanbieter-Website wie YouTube oder Vimeo gehostet wird, überall auf Ihrer Website einzubetten.
Wie man ein Video hinzufügt
Es gibt zwei Möglichkeiten, ein Videoelement zu Ihrer Website hinzuzufügen:
- Öffnen Sie das Hinzufügen-Panel und ziehen Sie ein Video-Element auf Ihre Webflow-Leinwand
- Drücken Sie Befehl + E (auf Mac) oder Strg + E (auf Windows), um die Schnellsuche zu öffnen und nach dem Video-Element zu suchen
Wie man Videoeinstellungen formatiert
Sobald Sie ein Videoelement auf Ihrer Leinwand platziert haben, haben Sie Zugriff auf die Videoeinstellungen, wo Sie eine URL und einen Titel hinzufügen können. Um schnell auf die Videoeinstellungen zuzugreifen:
- Doppelklicken Sie auf das Video-Element
- Wählen Sie das Video-Element aus und gehen Sie zum Elementeinstellungen-Panel (D)
Fügen Sie Ihre Video-URL ein, fügen Sie einen Titel hinzu, wenn Sie möchten, und drücken Sie Eingabe / Return. Das Thumbnail Ihres Videos wird im Videoelement angezeigt.
Unterstützte Videoquellen
- YouTube (wenn Sie mehr Kontrolle über Ihr YouTube-Video wünschen, versuchen Sie ein YouTube-Videoelement zu verwenden)
- Vimeo
- DailyMotion
- KickStarter (alles, was Sie tun müssen, ist die Hauptkampagnen-URL einzufügen und Webflow wird das Hauptkampagnenvideo abrufen)
- TED (mehrsprachige Unterstützung)
- Wistia
- Ustream
- Livestream
- Twitch
- Tudou
- Hulu
- SproutVideo
- Vidzflow
So legen Sie Videodimensionen fest
Das Videoelement respektiert die Abmessungen seines übergeordneten Containers (z. B. wenn Sie es in einen Div-Block einfügen, nimmt es die volle Breite dieses Div-Blocks ein). Wenn Sie eine benutzerdefinierte Breite und Höhe für Ihr Video festlegen möchten, können Sie einen benutzerdefinierten Div-Block erstellen. Ziehen Sie dazu einen Div-Block aus dem Add-Panel und geben Sie dem Div-Block einen Breitenwert und einen Höhenwert. Wenn Sie Ihr Video in diesen benutzerdefinierten Div-Block ziehen, passt es sich dieser Größe an.
Andere Möglichkeiten, Videos zu Ihrer Website hinzuzufügen
Sie können auch Videos zu Ihrer Website hinzufügen, indem Sie andere Elemente verwenden, darunter:
- YouTube-Video
- Hintergrundvideo
- Lightbox
- Rich-Text
- Benutzerdefinierte Code-Einbettung
YouTube-Videoelement
Das YouTube-Video-Element ermöglicht es Ihnen, ein Video von einer YouTube-URL einzubetten. Dieses Element bietet Ihnen alle Anzeigeoptionen, die die Einbettungsfunktion von YouTube bietet, einschließlich der Möglichkeit, verwandte Videos eines Kanals anzuzeigen, eine bestimmte Startzeit festzulegen, Videosteuerungen ein- oder auszublenden und mehr. Erfahren Sie mehr über das YouTube-Videoelement.
Hintergrundvideoelement
Das Hintergrundvideo-Element ermöglicht es Ihnen, bewegte Hintergründe ohne Ton hinzuzufügen. Im Gegensatz zum Videoelement, das nur YouTube- und Vimeo-Links unterstützt, kann das Hintergrundvideoelement jede von Ihnen hochgeladene Videodatei akzeptieren. Hintergrundvideoelemente verfügen auch über einen integrierten Play/Pause-Schalter, sodass Besucher der Website das Hintergrundvideo nach Belieben abspielen oder pausieren können. Erfahren Sie mehr über das Hintergrundvideoelement.
Lightbox-Element
Der Lightbox-Element ermöglicht es Besuchern der Website, ein Video in einem Popup-Fenster zu öffnen. Ähnlich wie das Videoelement unterstützt der Lightbox YouTube- und Vimeo-Links. Erfahren Sie mehr über das Lightbox-Element.
Rich-Text-Element und Rich-Text-Feld
Das Rich-Text-Element ermöglicht es Ihnen ebenfalls, Videos hinzuzufügen. Dies ist besonders leistungsstark, wenn Sie es verwenden, um Daten aus einem Rich-Text-Feld in einer CMS-Sammlung abzurufen. Alternativ können Sie auch ein Video-Element verwenden, um Daten dynamisch aus dem Video-Feld einer Sammlung abzurufen. Erfahren Sie mehr über Video-Felder in Sammlungen.
Wie man Videos mit benutzerdefiniertem Code einbettet
Sie können auch HTML-Videos mit dem Einbettungselement hinzufügen:
- Gehen Sie zum Hinzufügen-Panel
- Ziehen Sie ein Einbettungselement auf die Leinwand
- Fügen Sie Ihren Videocode ein (Erfahren Sie mehr über Videoelemente in HTML)
- Klicken Sie auf Speichern & schließen