Hinzufügen eines Videos zur Seite

Die meisten Blöcke, die das Einbetten von Videos ermöglichen, befinden sich in der Kategorie "Video" in der Blockbibliothek von Tilda.

Es gibt mehrere Möglichkeiten, ein Video auf Ihrer Website einzufügen: Hinzufügen von YouTube- und Vimeo-Videos, Kinescope, eine Option zum Hinzufügen des direkten Links zu einem Video auf einem Server eines Drittanbieters (HTML5-Video) und die Verwendung von iFrame zum Hinzufügen eines Videos.

Sie können die YouTube-Videos mit den Blöcken VD01 (ein Video), VD04 (Anzeige eines Videos, nachdem Sie auf die Schaltfläche "Play" geklickt haben), VD06N (zwei Videos), VD08 (Video und Text), VD09 (Pop-up-Video), VD11 (Video mit einem benutzerdefinierten Cover), VD12 (Video und Bild in einer Reihe), VD13 (YouTube-Livestream mit einem Live-Chat) hinzufügen, VD14 (Video-Wiedergabeliste), VD16 (Video-Widget), AB701 (Titel, Beschreibung und Video), BF402N (Video oder Bild und Formular in zwei Spalten), einige Galerieblöcke und auch 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 das Einbetten auf Websites von Drittanbietern aktiviert wurde.

Wählen Sie den Block aus, der Ihnen am besten gefällt, gehen Sie zur Registerkarte "Inhalt" und fügen Sie einen Link zu dem 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 mit den Blöcken VD01 (ein Video), VD04 (Anzeige eines Videos nach Klicken auf die Schaltfläche "Play"), VD06N (zwei Videos), VD08 (Video und Text), VD09 (Pop-up-Video), VD11 (Video mit benutzerdefiniertem Cover) hinzufügen, VD12 (Video und Bild in einer Reihe), VD14 (Video-Wiedergabeliste), VD16 (Video-Widget), AB701 (Titel, Beschreibung und Video), BF402N (Video oder Bild und Formular in zwei Spalten) sowie einige Galerieblöcke und auch Blöcke mit einem Vollbild als Hintergrund.

Wenn Ihr Video durch die Vimeo-Datenschutzeinstellungen gesperrt ist, enthält es eine zusätzliche Kombination aus Zahlen und Buchstaben am Ende des Links nach der Video-ID. Damit das Video abgespielt werden kann, fügen Sie diese Kombination in das Feld Vimeo Private Link Hash ein.

Wenn Ihr Video nicht auf den genannten Video-Hosting-Diensten veröffentlicht ist, können Sie es auf Ihren eigenen Server hochladen und mit den folgenden HTML5-Videoblöcken einfügen: VD01 (ein Video), VD04 (Anzeige eines Videos, nachdem Sie auf die Schaltfläche "Play" geklickt haben), VD08 (Video und Text), VD09 (Pop-up-Video), VD11 (Video mit benutzerdefiniertem Cover), VD12 (Video und Bild in einer Reihe), VD16 (Video-Widget), AB701 (Titel, Beschreibung und Video), BF402N (Video oder Bild und Formular in zwei Spalten) und einige Galerieblöcke. Sie können auch ein HTML5-Video als Hintergrund auf Ihrer Website einfügen, indem Sie Blöcke mit Vollbildhintergrund verwenden(weitere Informationen über das Hinzufügen eines Videos als Hintergrund).

Um ein solches Video auf der Seite einzufügen, müssen Sie WebM- und MP4-Videodateien verwenden. Sie können Videos in diese Formate konvertieren, indem Sie Online-Konverter oder Videobearbeitungs- oder Konvertierungssoftware verwenden. Platzieren Sie das Video dann auf einem Hosting-Server und erstellen Sie einen direkten Link zu der Datei. Beachten Sie, dass Sie höchstwahrscheinlich einen kostenpflichtigen Dateihosting-Dienst nutzen müssen, da nicht alle Dateispeicherdienste diese Funktion bieten.

Gehen Sie zur Registerkarte Inhalt des HTML5-Videoblocks und fügen Sie den Link zu Ihren Videos in beiden Formaten in die erforderlichen 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 mit den Blöcken VD01 (ein Video), VD04 (Anzeige eines Videos, nachdem Sie auf die Schaltfläche "Play" geklickt haben), VD08 (Video und Text), VD09 (Pop-up-Video), VD11 (Video mit einem benutzerdefinierten Cover), VD12 (Video und Bild in einer Reihe), VD14 (Video-Wiedergabeliste), AB701 (Titel, Beschreibung und Video), BF402N (Video oder Bild und Formular in zwei Spalten) und auch einige Blöcke mit einem Vollbild als Hintergrund hinzufügen.

Um mit Kinescope arbeiten zu können, müssen Sie sich auf der Website https://www.kinescope.com/ anmelden oder Ihr Konto einrichten.

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 mit iFrame hinzufügen, indem Sie die Blöcke VD01 (ein Video), VD04 (Anzeige eines Videos, nachdem Sie auf die Schaltfläche "Play" geklickt haben), VD08 (Video und Text), VD09 (Pop-up-Video), VD11 (Video mit einem benutzerdefinierten Cover), VD12 (Video und Bild in einer Reihe), VD14 (Video-Wiedergabeliste), AB701 (Titel, Beschreibung und Video), BF402N (Video oder Bild und Formular in zwei Spalten) verwenden.

Mit dieser Option können Videos von jeder Plattform hinzugefügt werden, die einen iframe-Code zum Einbetten von Videos in eine Website bereitstellt.

Mit dieser Option funktionieren die Einstellungen "Autoplay-Video" 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 "Stummschaltung" in den Link einfügen.

Sie können ein Video für ein Cover oder andere Blöcke mit einem Bild als Hintergrund anstelle eines statischen Hintergrundbildes verwenden. Gehen Sie zur Registerkarte Inhalt und fügen Sie einen Link zu Ihrem Video in das erforderliche Feld ein. Sie können einen YouTube-Videolink 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 den Diensten YouTube, Vimeo und Kinescope. Um ein Video hinzuzufügen, müssen Sie seine Daten im folgenden Format angeben:
Link zum Video; Videotitel; Videodauer; 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 es hinzufügen, sollten Sie Ihr Video für das Web vorbereiten und optimieren (mit spezieller Software oder Online-Editoren wie Veed.io).

Danach laden Sie die Datei auf einen Dienst hoch, der die Speicherung von Videos und den Zugriff darauf über einen direkten Link ermöglicht.

Gehen Sie zur Registerkarte "Inhalt" des Blocks und fügen Sie den Link zum Hauptvideo ein.

Sie können optional eine Vorschauversion des Videos hinzufügen. Sie kann den Nutzern helfen, einen ersten Eindruck vom Hauptvideo zu bekommen und die Ladezeit der Website zu verkürzen.
Die optimale Videogröße ist 200px breit und bis zu 5 Sekunden lang.

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.