Einfache Integration von YouTube-, Vimeo- & lokalen Videos in TYPO3-Seiten

Wer Videos in TYPO3 einbinden möchte, stößt mit Bordmitteln schnell an Grenzen. Externe Plattformen wie YouTube oder Vimeo lassen sich zwar grundsätzlich per HTML integrieren, und lokale Videos können über die Dateiliste eingebunden werden, doch für eine komfortable redaktionelle Pflege, ein einheitliches Erscheinungsbild und flexible Darstellungsoptionen reicht das in der Praxis oft nicht aus.

Mit sg_video steht jetzt eine moderne, zentrale TYPO3 Extension zur Verfügung, die die bisherigen Lösungen sg_youtube und sg_vimeo als gemeinsamer Nachfolger zusammenführt. Statt mehrere Erweiterungen parallel zu pflegen, erhalten Redaktionen und Integratoren eine einheitliche Lösung für YouTube, Vimeo und lokale TYPO3/FAL-Videos in nur einem Inhaltselement. Dabei bleiben die bekannten Funktionen erhalten und werden um die Unterstützung lokal gehosteter Videos erweitert.

Die Extension unterstützt das Einbinden von einzelnen Videos, Kanälen, Playlists und Vimeo-Showcases. Zusätzlich können lokale Videodateien direkt aus TYPO3 eingebunden werden. Für alle Quellen stehen einheitliche Möglichkeiten zur Darstellung und Steuerung bereit, etwa verschiedene Layouts, Lightbox- oder Inline-Wiedergabe, Titel- und Beschreibungsausgabe, Filterfunktionen sowie individuelle Vorschaubilder. Die Demo zeigt dabei ausdrücklich sowohl YouTube- und Vimeo-Inhalte als auch lokal gehostete Videos innerhalb derselben Extension.

So entsteht mit wenig Aufwand eine zentrale Video-Lösung für TYPO3-Websites: von einzelnen eingebetteten Videos bis hin zu umfangreichen Mediatheken mit Inhalten aus verschiedenen Quellen.

Kompatibilität

TYPO3-Versionen13.4.X | 14.X
PHP-Versionen8.3.x
Getestete BrowserEvergreen Browser
Zu den Release Notes

Highlights

Mediathek im Handumdrehen

Sie betreiben einen YouTube- oder Vimeo-Kanal und möchten auf Ihrer Unternehmenswebsite eine Mediathek mit Inhalten aus verschiedenen Videoquellen aufbauen? Mit sg_video gelingt das in TYPO3 unkompliziert und schnell. Die Extension vereint YouTube, Vimeo und lokale Videos in einem einzigen Inhaltselement. So können ganze Kanäle, Playlists oder Showcases ebenso einfach eingebunden werden wie einzelne Videos. Auch lokal in TYPO3 verwaltete Videodateien lassen sich nahtlos integrieren und passend zur Website gestalten.

Videos, Kanäle, Playlists und Showcases einfach einbinden

Die Einbindung ist bewusst einfach gehalten: Für YouTube und Vimeo genügt die jeweilige Video-, Kanal-, Playlist- oder Showcase-ID im Inhaltselement von sg_video, und die gewünschten Inhalte werden direkt in TYPO3 eingebunden. Alternativ lassen sich auch lokale Videodateien aus dem TYPO3-Dateisystem auswählen und verwenden. So entsteht mit wenig Aufwand eine flexible Videoeinbindung, ohne zwischen verschiedenen Erweiterungen wechseln zu müssen.

Layout & Verhalten steuern

Mit sg_video lassen sich Videos aus unterschiedlichen Quellen in einem einheitlichen Look präsentieren. Gleichzeitig bleibt genügend Spielraum für individuelle Gestaltung: Über die verfügbaren Einstellungen zu Layout, Informationen, Thumbnails und Verhalten können einzelne Videos gezielt hervorgehoben oder in thematische Videoübersichten eingebunden werden. Je nach Bedarf lassen sich Titel und Beschreibung anzeigen, Videos in einer Lightbox oder direkt auf der Seite abspielen und unterschiedliche Layouts verwenden. Die Bedienung bleibt dabei übersichtlich und redaktionell komfortabel.

Individuelle Thumbnails

Mit eigenen Thumbnails lässt sich die Darstellung der Videos noch gezielter an das Erscheinungsbild der Website anpassen. sg_video erlaubt es, benutzerdefinierte Vorschaubilder für eingebundene Videos zu verwenden. Dazu werden die gewünschten Bilder in TYPO3 hochgeladen und mit dem jeweiligen Inhaltselement verknüpft. Auf diese Weise entsteht eine einheitliche, hochwertig gestaltete Video-Mediathek.

Filter

Auch bei umfangreicheren Videoübersichten bleibt die Darstellung übersichtlich. 

Im TYPO3-Backend können Videoquellen nach passenden Suchbegriffen gefiltert werden, sodass auf der Website nur relevante Inhalte angezeigt werden. Zusätzlich lassen sich im Frontend Filter aktivieren, damit Besucher gezielt nach Videos innerhalb der Mediathek suchen können. Das verbessert die Orientierung, erleichtert den Zugriff auf passende Inhalte und unterstützt eine benutzerfreundliche Navigation durch größere Videobestände.

Datenschutz

Für externe Inhalte wie YouTube- und Vimeo-Videos ist in Kombination mit unserer TYPO3 Cookie-Opt-In-Lösung auch eine datenschutzfreundliche Einbindung möglich. Externe Inhalte werden dabei erst geladen, nachdem Besucherinnen und Besucher zugestimmt haben. Vorher kann stattdessen ein entsprechender Hinweis mit Auswahlmöglichkeit angezeigt werden. So lassen sich externe Videoquellen komfortabel einbinden, ohne den Datenschutz aus dem Blick zu verlieren. Lokale Videos können unabhängig davon direkt über TYPO3 bereitgestellt werden.

sgalinski Cookie Opt-In für TYPO3

In Kombination mit sg_video sorgt unsere Cookie-Consent-Lösung für eine datenschutzkonforme Einbindung externer Videos von YouTube und Vimeo in TYPO3. Externe Inhalte werden erst nach Zustimmung geladen und lassen sich komfortabel in das Nutzungserlebnis Ihrer Website integrieren. Mehr dazu auf unserer Cookie-Opt-In-Produktseite.

Vorschau


Überzeugen Sie sich von den Möglichkeiten unserer TYPO3 Video Extension!

Zur Vorschau-Seite

Dokumentation

Um sicherzustellen, dass keine Fragen unbeantwortet bleiben, haben wir für unsere Nutzerinnen und Nutzer der TYPO3 Video Extensions umfassende Dokumentationen zusammengestellt. Diese Anleitungen führen Sie Schritt für Schritt durch die Installation und Integration der YouTube- und Vimeo-Erweiterungen und zeigen Ihnen den Umgang mit den Inhaltselementen, die Sie nach erfolgreicher Konfiguration in Ihrer TYPO3-Instanz finden werden.


1 Technische Dokumentation: API Keys, Installation & Integration

1.1 YouTube

1.1.1 YouTube API-Key

Die TYPO3 Extension für YouTube-Videos benötigt für eine korrekte Funktion einen YouTube API-Key. Gehen Sie wie folgt vor, um den API-Key für die YouTube API zu erhalten. Wir setzen in dieser Anleitung voraus, dass Sie bereits einen Google-Account haben und eingeloggt sind.

  • Gehen Sie zur Google Cloud Console: https://console.cloud.google.com/
    Sollten Sie sich noch nicht bei der Google Cloud Console angemeldet haben, erscheint das Fenster zur Anmeldung. Dort müssen Sie Ihr Land auswählen und die Nutzerbedingungen akzeptieren. Klicken Sie im Anschluss auf Zustimmen und Fortfahren.

 

  • Erstellen Sie ein neues Projekt: Klicken Sie in der Projektauswahl auf Neues Projekt. Geben Sie einen Namen für das Projekt ein und klicken Sie auf Erstellen. Das Erstellen des Projektes kann etwas dauern. Sobald das neue Projekt ‚fertig‘ ist, wird es Benachrichtigungen angezeigt.
  • Projekt auswählen: Klicken Sie direkt in den Benachrichtigungen auf Projekt auswählen oder gehen Sie zur Projektauswahl wie im vorherigen Schritt gezeigt und wählen dort das gerade erstelle Projekt.
  • API-Bibliothek aufrufen: Klicken im Menü links auf die Schaltfläche APIs und Dienste > Bibliothek. Hier finden Sie alle verfügbaren APIs/Dienste.
  • YouTube-API aktivieren: Scrollen Sie in der Bibliothek runter, bis Sie YouTube-APIs sehen oder nutzen Sie die Suchleiste. Klicken Sie auf die API Youtube Data API v3. Im Anschluss klicken Sie auf der Detailseite der API auf Aktivieren und gelangen zu den API/Dienstdetails.
  • Anmeldedaten erstellen und API-Schlüssel generieren: Für den API-Key müssen Sie nun auf die Schaltfläche Anmeldedaten erstellen klicken. Danach müssen Sie (falls nicht vorausgewählt) die API auswählen. Das ist in unserem Fall YouTube Data API v3. Wählen Sie bei der Frage 'Auf welche Daten wird zugegriffen?' die Checkbox 'Öffentliche Daten' und klicken dann auf Weiter. Jetzt sehen Sie bereits Ihren API-Schlüssel, den Sie direkt kopieren und nutzen können. Klicken Sie auf Fertig.
  • API-Schlüssel anzeigen und kopieren: Unter APIs und Dienste > Anmeldedaten finden Sie jederzeit den erstellten API-Schlüssel.

Sie haben den YouTube API-Schlüssel erstellt! – Tragen Sie den YouTube API-Key an der Stelle ein, wie es in der unten stehenden Dokumentation im Abschnitt TypoScript Integration beschrieben wird.


1.2 Vimeo

1.2.1 Vimeo Client ID und Client Secret

Die TYPO3 Extension für Vimeo-Videos benötigt für eine korrekte Funktion eine Vimeo Client ID und Client Secret. Wir zeigen Ihnen, wie Sie an die Keys für die Vimeo API kommen. Dabei setzen wir voraus, dass Sie bereits einen Vimeo-Account haben und eingeloggt sind. Sollte das nicht der Fall sein, müssen Sie sich vorher bei Vimeo registrieren (https://vimeo.com/) und/oder einloggen.

Sie haben bereits eine Vimeo App erstellt und brauchen nur Client ID und Client Secret für unsere TYPO3 Vimeo Extension? – Dann gehen Sie direkt zu den Apps auf der Vimeo Developer-Seite (https://developer.vimeo.com/apps). Dorthin gelangen mit dem eben genannten Link oder über die Benutzereinstellungen > API Apps. Klicken Sie dort auf die entsprechende App und lesen die notwendigen Daten aus, wie es im folgenden Abschnitt beschrieben wird.

  • Gehen Sie zur Vimeo Developer-Seite: https://developer.vimeo.com/
  • Erstellen Sie eine App: Klicken auf die Schaltfläche Create an App oder Get started, um eine neue App zu erstellen.
  • Geben Sie die Details der App ein: Wählen Sie einen Namen für die App und füllen Sie die Beschreibung aus. Wählen Sie bei der Frage: 'Will people besides you be able to access your app?' – 'No. The only Vimeo accounts that will have access to the app are my own.' Stimmen Sie der Vimeo API Lizenzvereinbarung und den Vimeo Nutzungsbedingungen zu und klicken Sie auf Create app.
  • Nach dem Erstellen der App gelangt man direkt zu der Übersicht der App. Dort finden Sie die benötigten Daten. Links finden Sie ein Menü, mit dem Sie zu direkt zum gewünschten Punkt springen können.
    • Ganz oben in den Informationen unter General Information finden Sie die Client ID bzw. den Client Identifier. Diesen können Sie sich zum gegebenen Zeitpunkt oder immer wenn notwendig kopieren.
    • Unter Manage App Secrets finden Sie den Vimeo Client Secret. Auch diesen können Sie sich jederzeit kopieren.

WICHTIG: Sie müssen sicherstellen, dass der Account, der mit den API-Schlüsseln clientId und clientSecret verknüpft ist, über die richtigen Berechtigungen für die Suche in dem Kanal verfügt, in dem die Filter verwendet werden. Andernfalls führt die Suche nach einer Abfragezeichenfolge immer zu einer leeren Ergebnismenge.


1.2.2 Vimeo Personal Access Token

Wenn Sie ein Vimeo Video auf Ihrer Website zeigen möchten, das nicht öffentlich zugänglich ist, benötigen Sie ein persönliches Zugriffstoken (Personal Access Token). Gehen Sie wie folgt vor, um ein persönliches Zugriffstoken zu erstellen.

  • Wenn Sie bereits eine Vimeo App erstellt haben, klicken Sie in der App-Übersicht (https://developer.vimeo.com/apps/new) auf die entsprechende App.
    • Wenn Sie noch keine App erstellt haben, gehen Sie vor, wie es oben im Abschnitt 'Vimeo Client ID und Client Secret' beschrieben wird.
  • Klicken Sie im Menü links auf Generate Access Token. Wählen Sie die Checkbox 'Authenticated (you)' aus. Wählen Sie dann unter Scopes: 'Public (required)' und 'Private' aus. Das sichert den langfristigen Zugriff auf die Daten, mehr dazu finden Sie auf der Vimeo-Seite zur Authentifizierung: https://developer.vimeo.com/api/authentication. Klicken Sie auf Generate.
  • Im Menü unter Personal Access Token erscheint nun das Zugriffstoken/Personal Access Token, das Sie kopieren und wie ein Passwort behandeln sollten.

Hinweis: Sobald Sie die Seite verlassen und/oder sie neu laden, werden Sie das Zugriffstoken nicht mehr kopieren können. Dieses wird danach unkenntlich sein. Jedoch ist es jederzeit möglich ein neues persönliches Zugriffstoken für eine Vimeo App zu erstellen oder es zu löschen.

Lesen Sie mehr zum Erstellungsprozess eines Vimeo Personal Access Token in der offiziellen Vimeo Dokumentation, unter: https://help.vimeo.com/hc/en-us/articles/12427789081745-How-do-I-generate-a-personal-access-token

Tragen Sie die Vimeo Keys an der Stelle ein, wie es in der unten stehenden Dokumentation im Abschnitt TypoScript Integration beschrieben wird.


2 TYPO3 Extension: Installation & Integration

{"message":"401 Unauthorized"}


3 Redaktionelle Dokumentation: Inhaltselemente

SgVideo

Mit dem Inhaltselement Video können YouTube-, Vimeo- und lokale Videos direkt auf einer TYPO3-Seite eingebunden werden. Die bisher getrennten Erweiterungen sg-vimeo und sg-youtube wurden in sg-video zusammengeführt. Statt eines Plug-ins wird nun ein eigenes Inhaltselement verwendet, das die bisherigen Funktionen zentral bereitstellt.

Reiter Einstellungen

Ihnen stehen folgende Optionen zur Verfügung. 

Einstellungen

  • Anbieter (Youtube / Vimeo / Lokales Video)
  • Typ (Video / Kanal / Showcase)
  • Video-ID, Kanal-Name oder Showcase: Im Abschnitt zu den Youtube/Vimeo IDs weiter unten zeigen wir, wo die IDs zu finden sind.
  • Auszuschließende Video-IDs
  • Abfragetext
  • Maximale Anzahl
  • Zusätzliche URL-Parameter:  Dieses Feld können Sie für weitere Anpassungen Parameter nutzen. Das funktioniert nur, wenn Videos direkt auf der Seite abgespielt werden. Mehr Informationen zu Parametern finden Sie unter: https://help.vimeo.com/hc/en-us/articles/12426260232977-About-Player-parameters.
  • Filter

Aussehen

  • Layout-Art
  • Videotitel anzeigen & Videobeschreibungen anzeigen
  • Zeichenbegrenzung für Titel & Beschreibungen
  • Benutzerdefinierte Thumbnails für Videos

Verhalten

  • Video nicht in der Lightbox, sondern direkt auf der Webseite abspielen
  • Zeige API-Ergebnis an

Vimeo-Video IDs

Vimeo Kanal-Name

HINWEIS: Vimeo hat die Nutzung der Kanäle für Besucher aus der EU und dem Vereinigten Königreich eingeschränkt.

Gegebenenfalls können keine Videos angezeigt werden, auch wenn sie eine gültige Kanal-ID verwendet haben.

Um eine Kanal-ID hinzuzufügen, kopieren Sie aus dem Link des Kanals alles, was nach vimeo.com/channels/ kommt und fügen es in Zeile für die ID ein.

  • Kanal-Link: vimeo.com/channels/staffpicks
  • Kanal-Name: staffpicks

Vimeo-Showcase ID

Um eine Showcase ID hinzuzufügen, kopieren Sie aus dem Showcase-Link alles, was nach vimeo.com/showcase/ kommt und fügen es in Zeile für die ID ein.

  • Showcase-Link: vimeo.com/showcase/vimeocanhelp
  • Showcase ID: vimeocanhelp

Vimeo-Video ID

Um eine Video ID hinzuzufügen, kopieren Sie aus dem Link des Videos alles, was nach vimeo.com/ kommt und fügen es in Zeile für die ID ein.

  • Video-Link: vimeo.com/246107487
  • Video ID: 246107487

WICHTIG: Sie müssen sicherstellen, dass der Account, der mit den API-Schlüsseln clientId und clientSecret verknüpft ist, über die richtigen Berechtigungen für die Suche in dem Kanal verfügt, in dem die Filter verwendet werden. Andernfalls führt die Suche nach einer Abfragezeichenfolge immer zu einer leeren Ergebnismenge.

YouTube IDs

YouTube Kanal-ID

Es gibt verschiedene Wege, um die Kanal-ID herauszufinden, denn durch die URL ist die ID schon seit einiger Zeit nicht mehr ersichtlich. Wenn es sich um die ID des eigenen YouTube-Kanals handelt, findet man die Buchstaben und Zahlenfolge in den erweiterten Einstellungen des Accounts. Dazu finden Sie hier eine Anleitung von Google.

Wenn Sie die Kanal-ID eines beliebigen YouTube-Kanals benötigen, müssen Sie dafür in YouTube den gewünschten Kanal öffnen. Klicken Sie in der Kanalbeschreibung auf 'mehr' und klicken dann im erschienen Fenster auf Kanal teilen. Dort finden Sie die Option ‘Kanal-ID kopieren’. Die kopierte ID können Sie dann in die YouTube-Extension einfügen.

Die Kanal-ID fügen Sie dann einfach in das Plug-In ein und machen alle weiteren Einstellungen, die Sie benötigen.

YouTube Playlist-ID

Um eine Playlist-ID hinzuzufügen, kopieren Sie aus dem Link der Playliste alles, was nach list= kommt und fügen es in Zeile für die ID ein.

  • Playlist-Link: www.youtube.com/watch?v=rrVDATvUitA&list=PLmhUZw8WWzebYTvtVWHkb_YMgKARy6UON
  • Playlist-ID: PLmhUZw8WWzebYTvtVWHkb_YMgKARy6UON
YouTube Video-ID

Um eine Video-ID hinzuzufügen, kopieren Sie aus dem Link des Videos alles, was nach watch?v= kommt und fügen es in Zeile für die ID ein.

  • Video-Link: www.youtube.com/watch?v=IBAhAk0-sPo
  • Video-ID: IBAhAk0-sPo

Inhaltsbereich

Im Inhaltsbereich sehen Sie eine Übersicht über die Einstellungen, die Sie im Inhaltselement vorgenommen haben.

Videos im Frontend

Je nach vorgenommenen Einstellungen kann das Ergebnis im Frontend sehr unterschiedlich aussehen. In unserer Vorschau-Seite sehen Sie einige Beispiele dafür.

FAQ

Ein eingebettetes Video ist ein Video, das in einer Webseite integriert ist und direkt von dort abgespielt wird, ohne dass der Benutzer oder die Benutzerinn auf eine andere Website oder einen externen Player wechseln muss. Es wird häufig von Video-Sharing-Plattformen wie YouTube oder Vimeo bereitgestellt und kann über einen Embed-Code auf anderen Websites eingefügt werden.

Eine Mediathek ist eine Sammlung von Mediendateien wie Videos, Audios, Bildern und Dokumenten, die zentral gespeichert und verwaltet werden. Mediatheken werden häufig von Organisationen, Unternehmen, Websites und Social-Media-Plattformen genutzt, um ihre digitalen Inhalte zu verwalten und zu teilen. Durch die Verwendung einer Mediathek kann man einfach auf alle Mediendateien zugreifen und sie in anderen Kontexten verwenden, ohne sie jedes Mal neu hochladen zu müssen.

Es gibt eine Vielzahl von Videoportalen, einige der bekanntesten sind:  YouTube, Vimeo, Dailymotion, Facebook Video, Twitch, TikTok, Instagram TV (IGTV), LinkedIn Video, Twitter Video.

Das ist allerdings eine kurze Liste, es gibt viele weitere Videoportale, die je nach Zielgruppe und Zweck unterschiedlich sind.

Kontingente für YouTube-Videos sind Limits, die auf die Anzahl der Ansichten eines Videos oder auf die Anzahl der Aufrufe einer Playlist auf einer bestimmten Website oder einer bestimmten Domain festgelegt werden. Diese Limits werden von YouTube eingerichtet, um die Verwendung des Video- und Playlistinhalts zu regulieren und zu überwachen. Kontingente können auf verschiedene Weise eingesetzt werden, z. B. um die Verwendung des Inhalts für kommerzielle Zwecke zu beschränken oder um sicherzustellen, dass ein Video nur auf bestimmten Websites verwendet wird. Wenn ein Kontingent erreicht wird, wird das Video oder die Playlist möglicherweise nicht mehr auf der betreffenden Website angezeigt.

Es gibt eine kostenlose Version von Vimeo, die es Benutzern ermöglicht, Videos hochzuladen und zu teilen. Allerdings sind bestimmte Funktionen und Optionen, wie z.B. unbeschränkte Speicherkapazität, erweiterte Analyse-Tools und die Möglichkeit, Videos mit einer eigenen Domain zu verknüpfen, auf die kostenpflichtige Version beschränkt.

Eine API (application programming interface) ist eine Schnittstelle zwischen Softwareprogrammen, die eine Kommunikation und Datenaustausch zwischen ihnen möglich macht.

Wenn Sie beispielsweise eine Mediathek mit Videos von YouTube oder Vimeo erstellen möchten, können Sie die deren APIs verwenden. Die API ermöglicht es, auf auf die Videoplattform zuzugreifen und Videos von dort abzurufen, ohne sie herunterladen oder selbst hosten zu müssen. Die APIs geben auch Zugriff auf Informationen zu den Videos, wie Titel, Bseschreibung und Keywords. Zudem lassen sich Informationen über den Kanal abrufen, der das Video hochgeladen hat, und die Anzahl der Aufrufe, Likes und Kommentare des Videos erhalten.

Insgesamt ist eine API ein nützliches Werkzeug für Entwickler, um Daten und Funktionen von verschiedenen Systemen zu nutzen, ohne alles von Grund auf neu programmieren zu müssen.

Ein API-Key, API-Schlüssel oder API-Token ist ein spezieller Code / Zugangsschlüssel, mit dem man Zugang zu einer API erhält. Er dient dazu, den Zugriff auf die API zu autorisieren und zu kontrollieren.

Wer eine API verwenden möchte, muss sich normalerweise bei dem Anbieter der API registrieren, um einen API-Schlüssel zu erhalten. Der API-Schlüssel ist einzigartig und wird von der API-Plattform generiert. Der Key wird bei einer Anfrage an die API verwendet, um den Zugriff auf die Daten zu autorisieren. API-Schlüssel können auch verwendet werden, um den Zugriff auf bestimmte Funktionen oder Daten innerhalb der API zu beschränken oder zu erweitern.

Insgesamt ist der API-Schlüssel ein wichtiger Mechanismus, um sicherzustellen, dass nur autorisierte Benutzer auf die Daten und Funktionen der API zugreifen können und die Nutzung der API von nicht autorisierten Personen oder Anwendungen verhindert wird.

[1] Es besteht keine Garantie für dauerhafte Verfügbarkeit oder Support der Software. Lizenzinhaber:innen können die Software während der Lizenzlaufzeit verwenden, solange sie offiziell unterstützt wird und verfügbar ist.

Kontaktieren Sie uns

Sie interessieren sich für die TYPO3 Video Extensions sg_youtube und sg_vimeo oder für eines unserer weiteren Produkte? Sie möchten unsere Services in Anspruch nehmen? – Dann kontaktieren Sie uns einfach mit Ihrem Anliegen. Wir freuen uns auf Ihre Nachricht!