Universität Hamburg - der Forschung, der Lehre, der Bildung, zur Homepage
Fiona WCMS der Universität Hamburg
WCMS FIONA

Foto: RRZ/MCC/Mentz

Videos einbinden

Videos können in Fiona über besonderen Vorlagen eingebunden sowie im Hauptinhalt der meisten Vorlagen eingebettet werden. Hier erhalten sie einen Überblick über die verschiedenen Methoden, Videos auf Ihrer Seite zu platzieren.

2
true

Inhaltsverzeichnis

    Video-URLs

    Um ein Video auf Ihrer Webseite zu verwenden muss es bereits auf einem Server oder einer anderen Webseite öffentlich zugänglich sein. Je nachdem, mit welcher Vorlage sie es dann auf Ihrer Seite einbinden bzw. wie sie es im Hauptinhalt einbetten möchten, benötigen Sie eine bestimmte URL:

    Embed-URL

    Wird für die meisten Vorlagen benötigt, die ein Video einbinden können. Außerdem ist Sie Teil des HTML-Codes zur Einbettung eines Videos im Hauptinhalt mit IFrame.

    Die Embed-URL lässt sich bei Lecture2Go- und YouTube-Videos aus der URL der jeweiligen Video-Webseite ableiten:

    URL der Video-WebseiteEmbed-URL
    https://lecture2go.uni-hamburg.de/l2go/-/get/v/60638 https://lecture2go.uni-hamburg.de/o/iframe/?obj=60638
    https://www.youtube.com/watch?v=O8Tcg5MxsJ8 https://www.youtube.com/embed/O8Tcg5MxsJ8
    https://youtu.be/O8Tcg5MxsJ8

    Video-Datei-URL

    Wird für einige wenige Vorlagen benötigt um Videos einzubinden, sowie zur Einbettung eines Videos im Hauptinhalt ohne IFrame.

    Hier muss zunächst darauf geachtet werden, dass die Video-Datei, auf die die URL verweist, im passenden Datei-Format vorliegt:

    Von allen gängigen Browsern unterstütze Video-Datei-Formate
    Video-CodecContainer-FormateDatei-Endungen
    AV1 ISOBMFF, MP4, MPEG-TS, WebM .m4v 1, .mp4 1, .ts 1, .tsv 1, .webm
    AVC (H.264) 3GP, MP4 .3gp 1, .3gpp 1, .m4v 1, .mp4 1
    HEVC (H.265) ISOBMFF, MP4, MPEG-TS, QuickTime .m4v 1, .mov 1, .mp4 1, .ts 1, .tsv 1
    VP8 3GP, Ogg, WebM .3gp 1, .3gpp 1, .ogg 1, .ogv 1, .webm
    VP9 MP4, Ogg, WebM .m4v 1, .mp4 1, .ogg 1, .ogv 1, .webm

    1 Video-Dateien mit dieser Datei-Endung werden nur vom Browser unterstützt, wenn die Datei einen der in der Tabelle aufgeführten Codecs nutzt. Video-Dateien, die andere Codecs nutzen (z.B. H.263, MP4V-ES, MPEG-1, MPEG-2, Theora) können nicht im Browser abgespielt werden, auch wenn sie dieselbe Datei-Endung tragen. Mit Dateien der Endung .webm sind Sie auf der sicheren Seite.

    Des weiteren muss die URL de Video-Datei mit https:// beginnen und darf nicht zugriffsgeschützt sein.

    Lecture2Go

    Einige Videos bei Lecture2Go bieten unterhalb der Video-Beschreibung im Reiter "Teilen" eine Video-Datei-URL als "MP4 Download Link" an.

    Lokale Video-Dateien

    Um lokale Video-Dateien einzubinden, können Sie diese entweder bei Lecture2Go oder in Fiona hochladen und dann die URL der hochgeladenen Video-Datei kopieren.

    Vorlagen zum Einbinden von Videos

    Einige Vorlagen unterstützen die Einbindung eines Lecture2Go- bzw. YouTube-Videos und nutzen dabei entweder eine sogenannte Embed-URL oder die URL der Video-Datei selbst:

    VorlageLecture2GoYouTube
     URL zur Einbindung von Lecture2Go- bzw. YouTube-Videos in verschiedenen Vorlagen
    Artikel Embed-URL
    Event
    Kleiner Bildteaser
    News-Artikel
    Slide
    Video Box
    Video-Bereich
    Kachel Embed-URL Nicht möglich
    Outro
    Themenseite Video-Datei-URL
    Themenseite 2. Ebene
    Video Video-Datei-URL (Nur Vorschauvideo), Embed-URL (Nur Video)

    Videos im Hauptinhalt einbetten

    Alle Vorlagen, bei denen Sie den Hauptinhalt bearbeiten können, ermöglichen auch die Einbettung von Videos darin.

    Quellcode des Hauptinhalts bearbeiten

    Zur Einbettung eines Videos im Hauptinhalt müssen Sie den Quellcode bearbeiten:

    1. Öffnen Sie den Hauptinhalt des Ordners oder Dokuments in Fiona, in dem Sie das Video einbetten möchten.

    2. Klicken Sie auf den Button "Source code" in der Menü-Leiste.

    3. Nehmen Sie die gewünschten Änderugen vor, je nachdem wie sie das Video einbetten möchten:

    4. Bestätigen Sie die Änderungen mit einem Klick auf "Ok" und schließen Sie die Barbeitung des Hauptinhalts mit einem Klick auf "Ok" ab.

    5. Rufen Sie die Vorschau des Ordners bzw. Dokuments auf, um zu prüfen, ob die Änderungen wie gewünscht übernommen wurden.

    Ohne IFrame einbetten

    1. Kopieren Sie die URL der Video-Datei mit dem passenden Datei-Format.

    2. Navigieren Sie im Quellcode des Hauptinhalts zu der Stelle, an der Sie das Video einbetten möchten und fügen sie folgenden HTML-Code ein, wobei sie den Wert des src-Attributs durch die tatsächliche URL ihrer Video-Datei ersetzen:

      <video style="width: 100%; height: auto; aspect-ratio: 16 / 9;" src="https://fiona.uni-hamburg.de/de7aa10d/00.000video-606382022-03-0107-30.mp4" controls>Dieser Browser unterstützt keine HTML-Videos.</video>

    Mit IFrame einbetten

    Die Einbettung von Videos im Hauptinhalt per IFrame sollte nach Möglichkeit vermieden werden, da IFrames anfälliger für Fehlfunktionen sind und sich nachteilig auf die Barrierefreiheit der Seite auswirken!

    Um ein Video dennoch per IFrame im Hauptinhalt einzubetten, gehen Sie wie folgt vor:

    1. Kopieren Sie den HTML-Code für den IFrame von der Video-Webseite.

      • Bei Lecture2Go finden Sie diesen als "IFrame Code" unterhalb der Video-Beschreibung im Reiter "Teilen".

      • Bei YouTube erhalten Sie den IFrame-Code indem Sie rechts unter dem Video auf den "Teilen" und dann auf "Einbetten" klicken.

    2. Passen Sie den kopierten Code vor dem Einfügen in den Hauptinhalt an, indem die Attribute width und height entfernen und das Attribut style hinzufügen: 
      <iframe width="647" height="373" style="width: 100%; height: auto; aspect-ratio: 16 / 9;" [...]></iframe>

    3. Fügen Sie den angepassten HTML-Code im Quellcode des Hauptinhalts an der gewünschten Stelle ein.