Hinzufügen eines Videos zur Seite

Um einen Block mit einem Video zur Seite hinzuzufügen, öffne die Blockbibliothek und wechsle zur Kategorie „Video“.

Um ein Video auf Tilda hochzuladen, klicke in einem beliebigen Block der Kategorie „Video“ auf „Inhalt“ und wähle im Feld „Videoquelle“ MP4 oder WEBM aus. Klicke anschließend auf das Symbol zum Hochladen von Dateien. Du kannst ein Video im MP4- oder WEBM-Format mit einer Größe von bis zu 5 MB hochladen.

Sie können die YouTube-Videos mithilfe der Blöcke VD01 (Video), VD04 (Schaltfläche „Abspielen“), VD06N (Video in mehreren Spalten), VD08 (Text und Video in zwei Spalten), VD09 (Popup-Video), VD11 (Video mit benutzerdefiniertem Cover), VD12 (Video und Bild in einer Zeile), VD13 (YouTube-Livestream mit Live-Chat), VD14 (Videokurs-Wiedergabeliste), VD16 (Video-Widget), AB701 (Titel, Beschreibung und Video), BF402N (Video oder Bild und Formular in zwei Spalten), einige Galerie-Blöcke sowie Blöcke mit einem Vollbild als Hintergrund (erfahren Sie mehr über das Hinzufügen eines Videos als Hintergrund).

Um ein Video hinzuzufügen, benötigen Sie lediglich einen Link zu einem Video, das öffentlich zugänglich ist und in den Datenschutzeinstellungen für die Einbettung auf Websites Dritter freigegeben wurde.

Wählen Sie den Block aus, der Ihnen am besten gefällt, gehen Sie auf die Registerkarte „Inhalt“ und fügen Sie einen Link zum Video ein.

Wenn Sie möchten, dass das Video ab einem bestimmten Zeitpunkt abgespielt wird, fügen Sie der URL das Fragment ?start= hinzu und geben Sie die gewünschte Zeit in Sekunden ab dem Beginn des Videos an. Zum Beispiel: XEfDYMngJeE?start=5025. In diesem Fall wird das Video ab der 5025sten Sekunde abgespielt. Sie können die Zeit schnell kopieren, indem Sie mit der rechten Maustaste auf den Player klicken und die Option "Video-URL zur aktuellen Zeit kopieren" auswählen.

Sie können die Vimeo-Videos mithilfe der Blöcke VD01 (Video), VD04 (Schaltfläche „Abspielen“), VD06N (Video in mehreren Spalten), VD08 (Text und Video in zwei Spalten), VD09 (Popup-Video), VD11 (Video mit benutzerdefiniertem Cover), VD12 (Video und Bild in einer Zeile), VD14 (Videokurs-Wiedergabeliste), AB701 (Titel, Beschreibung und Video), BF402N (Video oder Bild und Formular in zwei Spalten), einige Galerie-Blöcke sowie Blöcke mit einem Vollbild als Hintergrund hinzufügen.

Wenn Ihr Video durch die Vimeo-Datenschutzeinstellungen gesperrt ist, enthält der Link am Ende hinter der Video-ID eine zusätzliche Kombination aus Zahlen und Buchstaben (den Hash-Parameter „?h=“). Damit das Video abgespielt wird, fügen Sie diese Kombination in das Feld „Vimeo Private Link Hash“ ein.

Sie können das Video auf Ihren Server hochladen und es mithilfe von HTML5-Video in die Blöcke einfügen. Dabei handelt es sich um die Blöcke VD01 (Video), VD04 (Schaltfläche „Abspielen“), VD08 (Text und Video in zwei Spalten), VD09 (Popup-Video), VD11 (Video mit benutzerdefiniertem Cover), VD12 (Video und Bild in einer Zeile), VD16 (Video-Widget), AB701 (Titel, Beschreibung und Video), BF402N (Video oder Bild und Formular in zwei Spalten), einige Galerie-Blöcke sowie Blöcke mit einem Vollbild als Hintergrund (erfahren Sie mehr über das Hinzufügen eines Videos als Hintergrund).

Um ein solches Video zur Seite hinzuzufügen, müssen Sie WebM- und MP4-Videodateien verwenden. Sie können Videos mithilfe von Online-Konvertern oder Videobearbeitungs- bzw. Konvertierungssoftware in diese Formate umwandeln.

Speichern Sie das Video anschließend auf einem Hosting-Server und generieren Sie einen direkten Link zur Datei. Beachten Sie, dass Sie höchstwahrscheinlich einen kostenpflichtigen Datei-Hosting-Dienst nutzen müssen, da nicht alle Dateispeicherdienste über eine solche Funktion verfügen.

Sobald Sie den Link zur Datei erhalten haben, gehen Sie zum Inhalt des Blocks mit dem HTML5-Video und fügen Sie den Link zu Ihren Videos in beiden Formaten in die entsprechenden Felder ein.

Um einen direkten Link zu einer Datei in einem HTML5-Videoblock hinzuzufügen, müssen Sie sie auf einen Dateispeicherdienst hochladen. Cloud-Speicheroptionen wie Google Drive oder Dropbox sind dafür nicht geeignet, da sie keinen direkten Link zu einer Datei bereitstellen.

Für diese Aufgabe müssen Sie Dienste oder Hosting-Anbieter nutzen, die einen Dateispeicherdienst anbieten. Schauen wir uns an, wie man eine Datei hochlädt und einen direkten Link zu ihr erhält, indem wir Selectel als Beispiel nehmen.

Sie können die Kinescope-Videos mithilfe der Blöcke VD01 (Video), VD04 (Schaltfläche „Abspielen“), VD08 (Text und Video in zwei Spalten), VD09 (Popup-Video), VD11 (Video mit benutzerdefiniertem Cover), VD12 (Video und Bild in einer Zeile), VD14 (Wiedergabeliste für Videokurse), AB701 (Titel, Beschreibung und Video), BF402N (Video oder Bild und Formular in zwei Spalten) sowie einige Blöcke mit einem Vollbild als Hintergrund hinzufügen.

Um mit Kinescope zu arbeiten, müssen Sie sich auf der Website https://www.kinescope.com/ registrieren oder sich in Ihrem Konto anmelden.

Um Ihr Video auf Kinescope hochzuladen, klicken Sie auf die Schaltfläche "Neu" in der rechten oberen Ecke, wählen Sie "Eine Datei hochladen" und fügen Sie ein Video hinzu.

Um das Video zur Website hinzuzufügen, klicken Sie auf die Schaltfläche mit den drei Punkten neben dem Video im Katalog → Kopieren Sie den Link → Fügen Sie den Link auf der Registerkarte Inhalt des Blocks in Tilda ein.

Sie können Videos über iFrame mithilfe der Blöcke VD01 (Video), VD04 (Schaltfläche „Abspielen“), VD08 (Text und Video in zwei Spalten), VD09 (Popup-Video), VD11 (Video mit benutzerdefiniertem Cover), VD12 (Video und Bild in einer Zeile), VD14 (Wiedergabeliste für Videokurse), AB701 (Titel, Beschreibung und Video), BF402N (Video oder Bild und Formular in zwei Spalten).

Diese Option ermöglicht das Hinzufügen von Videos von jeder Plattform, die einen iFrame-Code zum Einbetten von Videos in eine Website bereitstellt.

Bei dieser Option funktionieren die Einstellungen „Video automatisch abspielen“ und „Video mit stummgeschaltetem Ton“ nicht. Wenn die Plattform, auf der das Video gehostet wird, dies zulässt, können Sie die Parameter „Autoplay“ und „Mute“ in den Link einfügen.

Sie können ein Video als Titelbild oder für andere Blöcke mit Bildhintergrund anstelle eines statischen Hintergrundbildes verwenden. Gehen Sie zur Registerkarte „Inhalt“ und fügen Sie den Link zu Ihrem Video in das entsprechende Feld ein. Sie können Ihr Video auf Tilda hochladen, einen YouTube-Link oder einen HTML5-Videolink verwenden, den Sie mithilfe der obigen Anleitung erstellt haben.

Der Wiedergabelistenblock befindet sich in der Kategorie "Video" → VD14-Block.

Dieser Block unterstützt Videos von YouTube, Vimeo und Kinescope. Um ein Video hinzuzufügen, müssen Sie die entsprechenden Daten im folgenden Format angeben:
Link zum Video; Videotitel; Videolänge; Videobeschreibung

Eine kurze Zusammenfassung für jedes Video in der Wiedergabeliste sollte in einer neuen Zeile angegeben werden.

Das Video-Widget ist ein kleines Video in der Ecke des Bildschirms, mit dem Sie die Geschichte Ihres Produkts oder Ihrer Dienstleistung erzählen können. Die Vorschau wird ohne Ton abgespielt, und wenn Sie darauf klicken, wird das Hauptvideo mit Ton geladen.

Um das Video-Widget hinzuzufügen, gehen Sie zur Kategorie Video und wählen Sie den Block VD16.

Bevor Sie das Video hinzufügen, sollten Sie es für das Internet vorbereiten und optimieren (mithilfe spezieller Software oder Online-Editoren wie Veed.io).

Laden Sie die Datei anschließend auf Tilda einen Dienst hoch, der Videospeicherplatz bietet, und machen Sie sie über einen direkten Link zugänglich. Wenn Sie das Video auf einen Drittanbieter-Dienst hochgeladen haben, geben Sie den direkten Link zur Datei in Tilda an.

Sie können optional eine Vorschauversion des Videos hinzufügen. Dies kann den Nutzern einen ersten Eindruck vom Hauptvideo vermitteln und die Ladezeit der Website verkürzen.
Die optimale Größe für das Video beträgt 200 Pixel in der Breite und eine Länge von bis zu 5 Sekunden.

Sie können auch einen Link und einen Text für die Schaltfläche im Hauptvideo angeben, wenn Sie den Besucher zu einer bestimmten Aktion auffordern möchten. Wenn Sie keine Schaltfläche benötigen, lassen Sie die Felder einfach leer.

In den Blockeinstellungen können Sie die Parameter des Widgets, des Hauptvideos, das sich öffnet, und der Schaltflächen anpassen. Für das Widget können Sie das Seitenverhältnis, die Breite und die Parameter des Rahmens, die Position auf dem Bildschirm und andere Parameter festlegen. Für das Hauptvideo können Sie die Parameter für den Rahmen, den Schatten und die Schaltfläche Abspielen konfigurieren. Die Videobreite ist immer festgelegt - 560x315 für horizontale Videos und umgekehrt - 315x560 für vertikale Videos.

So fügen Sie ein Video in Zero Block ein → klicken Sie auf die Schaltfläche (+) und fügen Sie ein Videoelement hinzu → wählen Sie eine der verfügbaren Optionen, um ein Video hinzuzufügen: YouTube, Vimeo, MP4, Kinescope → fügen Sie den Link zum Video oder seine ID ein.

Um Videos von anderen Diensten hinzuzufügen, können Sie die Option der HTML-Code-Einbettung verwenden: Fügen Sie das HTML-Element hinzu → klicken Sie auf die Schaltfläche "Code bearbeiten" im Einstellungsfenster → geben Sie den Code zum Einbetten des Players an. Unten ↓ finden Sie Beispiele dafür, wie Sie den Code erhalten.

Im Produktkatalog können Sie ein Video hinzufügen, um das Produkt zu präsentieren. Gehen Sie dazu auf die Produktkarte → klicken Sie auf den Link "Video" neben einem Produktbild und fügen Sie den Link zu einem YouTube-, Vimeo- oder Kinescope-Video oder dessen ID ein.

In Feeds können Sie sowohl das Hauptvideo für den Beitrag hinzufügen (es wird am Anfang des Beitrags angezeigt und als Cover in der Liste der Beiträge verwendet) als auch mehrere Videos in den Beitragstext des Feeds einfügen.

Um das Hauptvideo hinzuzufügen, gehen Sie zum Feld mit einem Bild in der Beitragsbearbeitungskarte des Feeds → Registerkarte "Video" und fügen den Link zum Video ein.

Das Video wird am Anfang des Beitrags angezeigt.

Um ein Video in den Beitragstext einzufügen, klicken Sie auf das Plus-Symbol auf der linken Seite → einen Videoblock hinzufügen → klicken Sie darauf und geben Sie den Link zum Video an.

Wenn Sie auf die drei Punkte links neben dem Block klicken, können Sie das Video wechseln.

Das Video wird in den Text des Beitrags eingefügt. Speichern Sie die Änderungen.

Danach wird das Video im Text auf der Seite des Beitrags angezeigt.

Sie können Videos hinzufügen, indem Sie den Code des Players in den HTML-Codeblock einbetten. Gehen Sie dazu zu den Einstellungen des Players oder des Dienstes, um den Code zum Einbetten zu erhalten.

Für Kinescope klicken Sie auf die Schaltfläche mit den drei Punkten neben einem Video in der Liste → Einbetten → wählen Sie den responsiven Code, wenn Sie den Player an die Bildschirmgröße anpassen müssen, oder den festen Code, um einen kleinen Player hinzuzufügen, und geben Sie dessen Größe und Position im kopierten Code an → fügen Sie den erhaltenen Code in den T123-Block aus der Kategorie "Sonstige" oder in das HTML-Element in Zero Block ein.