Videos

In diesem Artikel erfährst du, welche Möglichkeiten es in Sitejet gibt, um Videos in Website-Projekten einzubetten.

INHALTSANGABE


Sieh dir das Video an

 

Einbetten von YouTube/Vimeo-Videos über entsprechende Elemente

Generell empfehlen wir, Videos über Plattformen wie YouTube oder Vimeo einzubinden, da diese auf das Abspielen von Videos ausgelegt und optimiert sind. Die Website-Besucher profitieren dadurch von einer schnelleren Ladezeit der Website.

Die folgenden Schritte sind für YouTube- und Vimeo-Videos identisch. Der einfachste Weg, ein YouTube/Vimeo-Video einzubetten besteht darin, die URL des Videos zu kopieren und in unser YouTube-Element einzufügen. 

  1. Klick auf + Inhalte hinzufügen, um auf alle Presets und Elemente zuzugreifen 
  2. Wähle das Videoelement aus und zieh es an die gewünschte Stelle

Solltest du bereits ein leeres Container-Element auf deiner Website haben, so kannst du per Klick auf "Element anlegen" und anschließendem Klick auf das YouTube- bzw. Vimeo-Element dieses noch schneller an die gewünschte Stelle einfügen.

Füge in den Elementeinstellungen die YouTube- oder Vimeo-URL  ein, um das Video zu laden. Du hast nun verschiedene Anpassungsoptionen:

  • Seitenverhältnis: Bestimme die Seitenverhältnisse deines Videos
  • Lazy Load: Diese Einstellung bestimmt, ob das Video vorab oder erst nach Klicken der Wiedergabetaste geladen werden soll
  • Steuerelemente anzeigen: Dadurch werden der Play Button, der Lautstärkeregler usw. aktiviert oder deaktiviert
  • Verwandte Videos: Wenn die Option aktiviert ist, wird nach dem Ende des Videos eine Liste von vorgeschlagenen Videos von YouTube angezeigt

Video über das Video-Element einbinden

Solltest du kein YouTube- oder Vimeo-Account haben, so kannst du selbstverständlich Videos auch direkt in Sitejet einbinden. Dafür wurde in Sitejet das Video-Element integriert. Dieses unterstützt die von den meisten Browsern unterstützten Formate ".mp4" und ".webm". Um das Video-Element deiner Website hinzuzufügen, gehe wie folgt vor:

  1. Bewege deine Maus über "+ Inhalte hinzufügen"
  2. Klicke auf "Element"
  3. Wähle das Video-Element aus und ziehe es an die gewünschte Stelle auf deiner Website
  4. Anschließend erhälst du folgende Ansicht

In den Elementeinstellungen hast du folgende Möglichkeiten: 

  • Eine Datei aus deinem Mediamanager auswählen 
  • Per Drag and Drop eine neue Datei hochladen
  • Das Video stummschalten
  • Eine Endlosschleife aktivieren
  • Steuerelemente ein- bzw. ausblenden
  • Ein Vorschaubild aus dem Mediamanager auswählen
  • Die Ausrichtung/Position vorgeben
  • Die Breite und Höhe vorgeben

Einbetten von Video-Dateien via Code

Eine weitere Möglichkeit stellt das direkte Einbinden des Videos über HTML-Code dar. Das Bild zeigt, wie du eine Datei per Drag and Drop in deinen Medienmanager ziehst. Du kannst auch in den gestrichelten Bereich klicken, um eine Datei von deiner Festplatte auszuwählen.

Ziehe als nächstes ein HTML-Element an die Stelle, an der du dein Video auf der Website zeigen möchtest. Verwende diesen HTML-Code, um dein Video einzubetten:

<video width="320" height="240" autoplay controls >  
	<source src="movie.mp4" type="video/mp4">  
	Your browser does not support the video tag.
</video><br>

Lass uns einen genaueren Blick darauf werfen, was die einzelnen Parameter bedeuten:

  • width/height: Legt die Breite und Höhe des Videoplayers fest
  • autoplay: Legt fest, ob das Video automatisch abgespielt wird oder nicht (Entferne den Parameter, um die Autoplay-Funktion zu deaktivieren)
  • controls: Gibt an, ob für das Video Steuerelemente wie Play/Pause und Lautstärke angezeigt werden (Entferne den Parameter, um die Steuerelemente auszublenden)
  • source: Hier wird der Link zur Videodatei im Mediamanager eingefügt. Dieses Bild zeigt dir, wie du dazu vorgehst

Achte darauf, dass du den Text "movie.mp4" im <source src="...">-Tag markierst. Klicke anschließend auf Datei einfügen, um auf den Medienmanager zuzugreifen, und wähle dann einfach die Videodatei von dort aus (Doppelklick oder Markierung und Häkchen setzen). Dadurch wird automatisch der Pfad zur Datei eingefügt. Normalerweise werden Mediendateien überall dort eingefügt, wo der Cursor aktiv ist, deshalb haben wir den zu ersetzenden Text zuerst markiert. Wenn du alles richtig gemacht hast, sollte es wie im Bild oben aussehen.


Videos als Hintergrund verwenden

Du kannst außerdem ein Video auch im Hintergrund abspielen lassen. Dafür ist ausschließlich ein Container-Element nötig. Viele Presets beruhen bereits auf einem Container-Element, sodass du den meisten Presets auch einen Video-Hintergrund zuweisen kannst. Mit Hilfe der folgenden Schritte aktivierst du ein Video als Hintergrund:

  1. Öffne die Einstellungen des gewünschten Container-Elements oder Presets, indem du es doppelt klickst 
  2. Wechsel in den Tab "Hintergrund" (hierher gelangst du auch ohne Doppelklick auf das Element und anschließendem Klick auf "Hintergrund", wenn du auf das Bild-Icon klickst)

In den Einstellungen hast du nun folgende Optionen:

  • Eine Datei aus deinem Mediamanager auswählen 
  • Per Drag and Drop eine neue Datei hochladen
  • Das Video stummschalten
  • Eine Endlosschleife aktivieren
  • Steuerelemente ein- bzw. ausblenden
  • Ein Vorschaubild aus dem Mediamanager auswählen

Werde ein Teil unserer Community!

Tausche dich mit anderen Webdesignern über aktuelle Entwicklungen, Tipps und Tricks aus und zeige deine Lieblingsseiten. Hole dir Ratschläge und sprich mit uns über mögliche Funktionen, die du dir für Sitejet wünschst. Hier gelangst du direkt auf unsere Community. Wenn du Hilfe bei deinem Slack-Account benötigst, schreib uns eine E-Mail an help@sitejet.io .  

Zurück zum Anfang

Hilfe benötigt? Kontakt aufnehmen Kontakt aufnehmen