Einfache Integration von YouTube und Vimeo Videos in TYPO3-Seiten

Wer schon einmal versucht hat, Videos von Videoportalen in eine TYPO3 Seite einzufügen, weiß, dass TYPO3 selbst keine eigens dafür konzipierte Lösung bietet. Es ist lediglich möglich YouTube und Vimeo Videos über das HTML-Element einzufügen oder Videos in der Dateiliste hochzuladen und anschließend im Text & Medien-Inhaltselement hinzuzufügen. Beide Wege sind nicht optimal für Videos, die sich auf den beliebten Videoportalen befinden, denn es fehlen Möglichkeiten, ihre Darstellung zu steuern. Letztere Option kann sich je nach Größe des Videos zudem stark auf die Leistung der Website auswirken.

Mit unseren TYPO3 Extensions erhalten Sie jeweils ein Plugin-Inhaltselement für YouTube-Videos und eines für Vimeo-Videos. Die sg_youtube und sg_vimeo Erweiterungen erlauben das Einbetten einzelner Videos, ganzer Kanäle oder Playlisten auf einer TYPO3 Seite, ohne die Videos auf den eigenen Servern hochladen zu müssen und haben zudem vielfältige Gestaltungsmöglichkeiten: Bestimmen Sie, wie viele Videos von einem Kanal oder einer Playlist angezeigt werden und schließen Sie alle ungewünschten Videos aus. Legen Sie fest, ob Titel und Beschreibung der Videos angezeigt werden sollen und stellen Sie den Thumbnail-Typen ein bzw. ändern das Vorschaubild komplett. Mit diesen Einstellungsmöglichkeiten betten Sie YouTube und Vimeo Videos schnell und effizient in Ihre Website ein und sind in der Lage ganze Mediatheken unkompliziert aufzubauen.

Kompatibilität

TYPO3-Versionen 10.4.X | 11.5.X
PHP-Versionen 7.4.X | 8.0.X | 8.1.X
Getestete Browser Evergreen Browser

Highlights

Mediathek im Handumdrehen

Sie betreiben einen YouTube Kanal oder einen Vimeo Kanal und möchten auf Ihrer Unternehmenswebsite eine Mediathek mit den Inhalten von den Videoportalen aufbauen? – Mit unseren TYPO3 Extensions für YouTube und Vimeo ist das nun auch für TYPO3 Seiten unkompliziert und schnell gemacht. Mit nur einem Plugin-Inhaltselement können Sie die Videos eines ganzen Channels oder einer Playlist abbilden. Ebenso einfach lassen sich einzelne Videos einbetten: bequem und nach Ihren Wünschen gestaltet.

Videos, Kanäle und Playlists/Showcases einfach mit IDs einbinden

Einfacher geht es wirklich kaum: Fügen Sie die ID eines Videos, einer Playlist bzw. eines Showcases oder eines Kanals von den beliebten Videoportalen YouTube oder Vimeo in das entsprechende Plugin Inhaltselement im Backend Ihrer TYPO3 Website, das Sie durch unsere Erweiterungen erhalten und schon sind die Videos in Ihre Website eingebettet, ohne diese auf Ihren Servern hochladen zu müssen. So lässt sich Ihr Website Content auflockern und komplexe Sachverhalte können anschaulich dargestellt werden, ohne dabei Videos herunterladen zu müssen und mit potenziell großen Dateien Ihre Speicher-Kapazitäten auszulasten.

Layout & Verhalten steuern

Unsere TYPO3 Extensions für YouTube und Vimeo Videos erlauben es Ihnen, Videos in einem einheitlichen Look zu präsentieren. Wer optisch ein wenig variieren möchte, fügt mehrere YouTube oder Vimeo Inhaltselemente ein und nutzt die verschiedenen Einstellungsmöglichkeiten zum Layout, den Informationen, Thumbnails und Verhalten, womit z. B. bestimmte Videos hervorgehoben werden können, während bei anderen ein thematischer Zusammenhang optisch dargestellt werden kann. Je nach Bedarf können Videos mit Überschrift oder Beschreibung eingebettet werden. Sie bestimmen, ob Videos in einer Lightbox oder direkt auf der Seite abgespielt werden. Des Weiteren stehen Ihnen mehrere Layouts zur Verfügung. Die Möglichkeiten sind vielfältig, gleichzeitig sind die Inhaltselemente einfach und intuitiv zu bedienen.

Individuelle Thumbnails

Noch persönlicher wird Ihre Mediathek mit eigenen Thumbnails, das sind die kleinen Vorschaubilder, die zu sehen sind, bevor ein Video startet. Beide Video Extensions erlauben es, benutzerdefinierte Thumbnails selbst einzustellen. Dafür müssen Sie lediglich die Bilder, die als Thumbnails genutzt werden sollen, in der Dateiliste hochladen und mit dem entsprechenden Inhaltselement verknüpfen. Die YouTube Extension beinhaltet weiterhin die Möglichkeiten, das Seitenverhältnis für das Thumbnail  und einen Thumbnail-Typen zu bestimmen.

Datenschutz

In Kombination mit dem Schutz externer Inhalte durch unsere Cookie Opt-In Extension für TYPO3 ist zudem eine datenschutzfreundliche Einbindung der Videos möglich. Unsere Erweiterung für Cookies und externe Inhalte verhindert, dass Cookies gesetzt werden, bevor Besucher und Besucherinnen diesen zugestimmt haben. Über externe Inhalte wird dafür eine Box gelegt, die es erlaubt, diesen Inhalt zu laden oder alle externen Inhalte zu akzeptieren. Außerdem ist es möglich, diese Box individuell zu gestalten.

sgalinski Cookie Opt-In für TYPO3

Unsere Cookie Consent Lösung passt perfekt zu den TYPO3 Video Extensions für YouTube und Vimeo und ermöglicht eine datenschutzkonforme Einbindung von Videos auf Ihrer TYPO3 Website – Besuchen Sie unsere Cookie Opt-In Produktseite für mehr Informationen!

Preise

TYPO3 Extensions zur Integration von YouTube und Vimeo Videos

Unsere Video-Erweiterungen für TYPO3 sind die einfachste Lösung, Videos von YouTube oder Vimeo in TYPO3-Seiten zu integrieren.

Die Plugin Inhaltselemente zum Einfügen der Videos sind intuitiv aufgebaut und einfach zu bedienen. Um Videos einzubetten, benötigen Sie nur die ID von YouTube oder Vimeo. Gemeinsam mit dem Schutz externer Inhalte durch unsere Cookie Opt-In Extension lässt sich das ganze zudem datenschutzfreundlich umsetzen.

  • Einfache Installation & schnelle Konfiguration
  • Intuitiv & einfach aufgebaut
  • Vielfältige Gestaltungsmöglichkeiten
  • Kostenfreie Updates für die gesamte Laufzeit Ihrer Lizenz

Preise:

  • Jahreslizenz1: 59,99 € pro Instanz
  • Lifetime-Lizenz1: 199,99 € pro Instanz
  • Volumenlizenz: Bei Bestellungen ab 20 Lizenzen werden 25 % Mengenrabatt gewährt und ab 50 Lizenzen werden 50 % Rabatt vergeben.

Überzeugen Sie sich von den vielfältigen Möglichkeiten unserer TYPO3 Video Extensions und besuchen Sie unsere Vorschau-Seite.

Zur Vorschau-Seite

Dokumentation

Technische Dokumentation: Installation & Integration

YouTube

Ext: sg_youtube

License: GNU GPL, Version 2

Repository: https://gitlab.sgalinski.de/typo3/sg_youtube

Please report bugs here: https://gitlab.sgalinski.de/typo3/sg_youtube

Installation / Integration

First install the extension and activate it in the Extension Manager.

TypoScript integration

  • Include the TypoScript in Configuration/TypoScript/setup.typoscript and constants.typoscript in your theme.
  • Add your YouTube API key:
plugin.tx_sgyoutube {
	settings {
		# cat=plugin.tx_sgyoutube/file; type=string; label=YouTube API Key
		apiKey = <your-api-key>
	}
}

JavaScript integration

Note: You can still use the old implementation of the lightbox without the new lightbox by importing `youtubeLightboxinstead ofsgYoutubeLightbox`.

Install the project_theme_lightbox extension and integrate it to your main theme. Import the file `sgYoutubeLight.js` to your JavaScript and initilize it.

import SgYoutubeLightbox from 'sgYoutubeLightbox';

new SgYoutubeLightbox();

Registration for more than the free 10.000 quotas per day

It's not 1 quota per 1 API call. Each API has its own costs, which can be seen in the link below.

Currently, at the version 3.2.1 we are using the following APIs:

  • "search/list" for channel videos
  • "playlistItems/list" for videos from a specific playlist
  • "videos/list" for getting the details for each video and the localizations, if needed.

The maximum quota costs would be "102" at the moment for rendering the latest videos from a channel with the video details and translations.

Quota Calculator

YouTube API Services - Audit and Quota Extension Form

Caching behaviour

Because of the quota costs we implemented a caching for the calls for each day. The response from the APIs will be saved and used for 24 hours. Normally the site cache would do it, but it could be, that the cache will be cleared multiple times in a row, or that the plugin is on an uncached page. The TYPO3 registry is used as a cache. The cleanup is handled on the fly.

If the ?disableYoutubeCache=1 parameter is added to the URL, this cache will be ignored as well.

Possible way to solve the quota limit, if it's still reached

You can use a different API key for specific sites. You can implement a TypoScript page uid check and just change the key from the "TypoScript integration" topic.

Known issues

Vimeo

Ext: sg_vimeo

License: GNU GPL, Version 2

Repository: https://gitlab.sgalinski.de/typo3/sg_vimeo

Please report bugs here: https://gitlab.sgalinski.de/typo3/sg_vimeo

Installation / Integration

First install the extension and activate it in the Extension Manager.

Vimeo app

TypoScript integration

  • Include the TypoScript in Configuration/TypoScript/setup.typoscript and constants.typoscript in your theme.
  • Add your Vimeo client identifier & client secret (and optionally your personal access token):
plugin.tx_sgvimeo {
	settings {
		# cat=plugin.tx_sgvimeo/file; type=string; label=Vimeo client identifier
		clientId = <your-client-id>
		# cat=plugin.tx_sgvimeo/file; type=string; label=Vimeo client secret
		clientSecret = <your-client-secret>
		# cat=plugin.tx_sgvimeo/file; type=string; label=Vimeo Personal access token
		personalAccessToken =
	}
}

Private videos

If you have a video which is not available to the public, but you want to show it on your website, you need an authenticated personal access token. You can find a guide, on how to generate such a token here: https://vimeo.zendesk.com/hc/en-us/articles/360042445032-How-do-I-generate-a-personal-access-token-

The following requirements have to be met, for the private video to show up:

  • the video has to be hosted on the same vimeo account, that was used to configure the clientSecret & clientId (vimeo app)
  • a personal access token with access scope "private" has to be configured in the typoscript settings ( personalAccessToken)

Working with Rate Limits

As with almost every API, there is a usage limit, which depends on the vimeo user membership of the user, that makes the API requests (the owner of the vimeo app).

sg_vimeo uses the following endpoints:

  • Video - api.vimeo.com/videos/{video_id}
  • Channel Videos - api.vimeo.com/channels/{channel_id}/videos

sg_vimeo uses field filtering to requests only the fields that are needed.

Caching behaviour

Because of the quota costs we implemented a caching for the calls for each day. The response from the APIs will be saved and used for 24 hours. Normally the site cache would do it, but it could be, that the cache will be cleared multiple times in a row, or that the plugin is on an uncached page. The TYPO3 registry is used as a cache. The cleanup is handled on the fly.

If the ?disableVimeoCache=1 parameter is added to the URL, this cache will be ignored as well.

.htaccess

Requires img-src https://i.vimeocdn.com;, script-src https://player.vimeo.com; and connect-src https://cdn.plyr.io;.

Known issues


Redaktionelle Dokumentation: Plug-In Inhaltselemente

YouTube

Mit dem YouTube Plug-In lassen sich YouTube-Videos auf einer TYPO3-Seite darstellen, ohne dass Videos heruntergeladen und im System wieder hochgeladen werden müssen. Zudem besitzt das Inhaltselement diverse Optionen, mit denen sich die Darstellung der Videos individuell anpassen lässt.

Reiter Plug-In

ID eines Channels, einer Playlist oder eines einzelnen Videos

Tragen Sie hier die ID des Kanals, der Playlist oder eines einzelnen YouTube-Videos ein. Mehr darüber finden Sie weiter unten im Abschnitt zu den YouTube IDs.

Ausschließende Video-IDs

Wenn Sie bestimmte Videos einer Playlist oder eines Kanals nicht auf Ihrer Website zeigen möchten, können Sie diese hier ausschließen. Tragen Sie dafür die entsprechenden IDs mit einem Komma getrennt hintereinander weg ein.

Maximale Anzahl

Entscheiden Sie, wie viele Videos maximal auf einmal angezeigt werden.

Videotitel anzeigen & Videobeschreibungen anzeigen

Mit diesen Checkboxen können Sie festlegen, ob Titel oder Beschreibungen des Videos angezeigt werden sollen oder nicht.

Video nicht in der Lightbox, sondern direkt auf der Webseite abspielen (Desktop & Mobile)

Standardmäßig wird ein Video beim Klick auf das Thumbnail in einer Lightbox abgespielt. Wenn Sie Videos direkt auf der Seite abspielen lassen möchten, sollten Sie hier das Häkchen setzen.

Aspect Ratio

Legen Sie das Seitenverhältnis fest. Die Einstellung wird nur genutzt, wenn der Thumbnail-Typ das prüfen soll.

Thumbnail-Typ

Legen Sie hier die Auflösung von maximal bis niedrig fest. Nicht immer sind alle Optionen vorhanden.

Benutzerdefinierte Thumbnails für Videos

Es besteht auch die Möglichkeit, eigene Thumbnail-Bilder für YouTube-Videos festzulegen. Dabei wird das erste Bild über das erste Video gelegt, das zweite Bild wird über das zweite Video gelegt usw.

Zeige API-Ergebnis an

Legen Sie fest, ob Debug-Informationen angezeigt werden sollen.

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.

Sollten Sie die ID eines anderen Kanals benötigen, geht das leider nicht ganz so einfach. Auch hier gibt es eine Lösung von Google. Alternativ dazu rufen Sie den Kanal auf YouTube auf und suchen im Quelltext nach "externalId" nach einem Doppelpunkt folgt die Kanal-ID ebenfalls in Anführungsstrichen. Oder aber Sie führen in der Konsole folgenden JavaScript Code aus ytInitialData.metadata.channelMetadataRenderer.externalId, woraufhin die Kanal-ID in Anführungsstrichen angezeigt wird.

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 YouTube Plug-In vorgenommen haben.

YouTube im Frontend

Je nachdem, welche Einstellungen im Plug-In gewählt wurden, können Videos, Playlists und Kanäle ganz unterschiedlich aussehen. Auf unserer Vorschau-Seite sehen Sie einige Beispiele, wie unterschiedliche Einstellungen sich auf die Optik im Frontend auswirken.

Vimeo

Mit dem Vimeo Plug-in können Vimeo-Videos auf einer TYPO3-Seite angezeigt werden, ohne dass die Videos heruntergeladen und wieder ins System hochgeladen werden müssen. Außerdem verfügt das Inhaltselement, wie auch das YouTube-Plugin, über verschiedene Optionen, mit denen sich die Darstellung der Videos individuell anpassen lässt.

Reiter Plug-In

Erweiterungsoptionen

Ihnen stehen folgende Optionen zur Verfügung. Diese gleichen den Optionen für das YouTube Plug-In. Beim Bearbeiten des Vimeo Inhaltselements können Sie sich also an den YouTube Anleitungen orientieren.

  • Video-ID, Kanal-Name oder Showcase (mehr dazu im Abschnitt zu Vimeo-Video IDs)
  • Auszuschließende Video-IDs
  • Maximale Anzahl
  • Videotitel anzeigen & Videobeschreibungen anzeigen
  • Video nicht in der Lightbox, sondern direkt auf der Webseite abspielen (Desktop & Mobile)
  • Benutzerdefinierte Thumbnails für Videos
  • Zeige API-Ergebnis an

Vimeo-Video IDs

Vimeo Kanal-Name

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 Link des Showcases 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

Inhaltsbereich

Im Inhaltsbereich sehen Sie eine Übersicht über die Einstellungen, die Sie im Vimeo Plug-In vorgenommen haben.

Vimeo 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

Was ist ein eingebettetes Video?

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.

Was ist eine Mediathek?

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.

Welche Videoportale gibt es?

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.

Was sind Kontingente für YouTube Videos?

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.

 

Kann man Vimeo kostenlos nutzen?

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.

 

 

[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!