2 TYPO3 Extension: Installation & Integration
{"message":"401 Unauthorized"}
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.
| TYPO3-Versionen | 13.4.X | 14.X |
| PHP-Versionen | 8.3.x |
| Getestete Browser | Evergreen Browser |
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
{"message":"401 Unauthorized"}

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.
Ihnen stehen folgende Optionen zur Verfügung.
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.
vimeo.com/channels/staffpicksstaffpicksVimeo-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.
vimeo.com/showcase/vimeocanhelpvimeocanhelpVimeo-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.
vimeo.com/246107487246107487WICHTIG: 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.
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.
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.
www.youtube.com/watch?v=rrVDATvUitA&list=PLmhUZw8WWzebYTvtVWHkb_YMgKARy6UONPLmhUZw8WWzebYTvtVWHkb_YMgKARy6UONUm 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.
www.youtube.com/watch?v=IBAhAk0-sPoIBAhAk0-sPoIm Inhaltsbereich sehen Sie eine Übersicht über die Einstellungen, die Sie im Inhaltselement vorgenommen haben.

Je nach vorgenommenen Einstellungen kann das Ergebnis im Frontend sehr unterschiedlich aussehen. In unserer Vorschau-Seite sehen Sie einige Beispiele dafür.
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.
'YouTube No Cookie' ist eine Option, die es ermöglicht, YouTube-Videos auf Websites einzubetten, ohne dass Cookies gesetzt werden. Normalerweise werden beim Abspielen eines YouTube-Videos auf einer Website Cookies gesetzt, um Informationen über das Verhalten des Benutzers zu sammeln und zu analysieren. Durch die Verwendung von 'YouTube No Cookie' kann man das Setzen von Cookies verhindern und die Datenschutzeinstellungen verbessern. Um 'YouTube No Cookie' zu verwenden, muss man den Embed-Code des Videos ändern und statt www.youtube.com www.youtube-nocookie.com verwenden.
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!