Easy integration of YouTube and Vimeo videos into TYPO3 pages

If you have ever tried to insert videos from video portals into a TYPO3 page, you know that TYPO3 itself does not offer a solution specifically designed for this purpose. It is only possible to insert YouTube and Vimeo videos via the HTML element or to upload videos in the filelist and then add them in the Text & Media content element. Both ways are far from perfect for videos located on the popular video portals, as there are no options to control their display. The latter option can also have a major impact on website performance, depending on the size of the video.

With our TYPO3 extensions you get one plugin content element for YouTube videos and one for Vimeo videos. The sg_youtube and sg_vimeo extensions allow you to embed individual videos, entire channels or playlists on a TYPO3 page without having to upload the videos to your own servers and also have a variety of design options: Determine how many videos from a channel or playlist are displayed and exclude all unwanted videos. Determine whether the title and description of the videos should be displayed and set the thumbnail type or change the preview image completely. With these setting options, you can embed YouTube and Vimeo videos quickly and efficiently into your website and are able to build entire media libraries easily.

Compatibility

TYPO3 Versions 10.4.X | 11.5.X
PHP Versions 7.4.X | 8.0.X | 8.1.X
Tested Browsers Evergreen Browsers

Highlights

Media library in a snap

You run a YouTube channel or a Vimeo channel and want to build a media library with the content from the video portals on your corporate website? – With our TYPO3 Extensions for YouTube and Vimeo, this is now made easy and fast for TYPO3 sites. With just one plugin content element, you can display the videos of an entire channel or playlist. Individual videos can be embedded just as easily: conveniently and configured just the way you want.

Easily embed videos, channels and playlists/showcases using IDs

It really couldn't be easier: Add the ID of a video, a playlist or a showcase or a channel from the popular video portals YouTube or Vimeo to the corresponding plugin content element in the backend of your TYPO3 website, which you get through our extensions, and the videos are already embedded in your website without having to upload them to your servers. This way, your website content can be enriched, and complex topics can be presented in a clear way without having to download videos and using up your storage capacity with potentially large files.

Control layout & behavior

Our TYPO3 extensions for YouTube and Vimeo videos allow you to present videos in a consistent look. If you want to vary the look a bit, insert several YouTube or Vimeo content elements and use the various setting options for layout, information, thumbnails and behavior, with which, for example, certain videos can be highlighted, while a thematic connection can be visually displayed for others. Depending on your needs, videos can be embedded with captions or descriptions. You determine whether videos are played in a lightbox or directly on the page. Furthermore, several layouts are available. The possibilities are manifold, at the same time the content elements are easy and intuitive to use.

Custom thumbnails

Your media library becomes even more personal with custom thumbnails, which are the small preview images you see before a video starts. Both video extensions allow you to set custom thumbnails yourself. To do this, all you have to do is upload the images you want to be used as thumbnails in the file list and link them to the related media element. The YouTube extension further includes the options to set the aspect ratio for the thumbnail and a thumbnail type.

Data privacy

In combination with the protection of external content through our Cookie Opt-In Extension for TYPO3, a privacy-friendly integration of the videos is also possible. Our extension for cookies and external content prevents cookies from being set before visitors have agreed to them. For this purpose, a box is placed over external content, which allows loading this content or to accept all external content. It is also possible to customize this box.

sgalinski Cookie Opt-In for TYPO3

Our Cookie Consent solution fits perfectly into the TYPO3 Video Extensions for YouTube and Vimeo and enables a privacy compliant integration of videos on your TYPO3 website – Visit our Cookie Opt-In product page for more information!

Prices

TYPO3 extensions for the integration of YouTube and Vimeo videos

Our video extensions for TYPO3 are the easiest solution to integrate videos from YouTube or Vimeo into TYPO3 pages.

The plugin content elements for inserting videos are intuitively designed and easy to use. To embed videos, you only need the ID from YouTube or Vimeo. Together with the protection of external content through our Cookie Opt-In Extension, the whole setup can also be implemented in a privacy-friendly way.

  • Easy installation & fast configuration
  • Intuitive & simple design
  • Wide range of design options
  • Free updates for the entire term of your license

Prices:

  • Annual License1: 59,99 € per instance
  • Lifetime License1: 199,99 € per instance
  • Volume license: 25 % volume discount is granted for orders from 20 licenses and 50 % discount is granted from 50 licenses upwards

Convince yourself of the various possibilities of our TYPO3 Video Extensions and visit our preview page.

To the Preview Page

Documentation

Technical Documentation: 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


Editorial documentation: Plugin content elements

YouTube

You can use the YouTube plugin to display YouTube videos on a TYPO3 page without having to download videos and upload them again in the system. In addition, the content element has various options that can be used to customize the display of the videos.

Tab Plugin

ID of Channel, Playlist or Single Video

Enter the ID of the channel, the playlist or an individual YouTube video here. You can read more about it below in the YouTube IDs section.

IDs of the videos to exclude

If you do not want to show certain videos of a playlist or channel on your website, you can exclude them here. To do this, enter the corresponding IDs one after the other, separated by a comma.

Maximum Amount

Decide how many videos are displayed at a time.

Show Videos Titles & Show Video Descriptions

These checkboxes allow you to specify whether or not to display titles or descriptions of the video.

Play video not in the lightbox, but directly on the web page(Desktop & Mobile)

By default, a video is played in a lightbox when you click the thumbnail. If you want to play videos directly on the page, you should check this box.

Aspect Ratio

Specify the aspect ratio. The setting is only used when the thumbnail type should check it.

Thumbnail Type

Set the resolution from maximum to low. Not all options are always available.

Custom Thumbnail for the Videos

It is also possible to set your own thumbnail images for YouTube videos. The first image is placed over the first video, the second image is placed over the second video, and so on.

Show API Result

Specify whether debug information should be displayed.


YouTube IDs

YouTube Channel ID

There are several ways to find out the channel ID, as through the URL the ID is no longer visible for some time. If it is the ID of your own YouTube channel, you can find the letters and number sequence in the advanced settings of the account. You can find instructions from Google on how to do this.

If you need the ID of another channel, it is unfortunately not quite as simple. Here, too, there is a solution from Google. Alternatively, call up the channel on YouTube and search in the source code for "externalId" after a colon follows the channel ID, also in quotes. Or you can execute the following JavaScript code in the consoleytInitialData.metadata.channelMetadataRenderer.externalId, whereupon the channel ID is displayed in quotes.

You then simply paste the channel ID into the plug-in and make any other settings you need.

ID of YouTube Playlist

To add a playlist ID, copy from the playlist link everything that comes after list= and paste it into line for the ID.

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

To add a video ID, copy from the link of the video everything that comes after watch?v= and paste it into line for the ID.

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

Content Area

In the content area you will see an overview of the settings you have made in the YouTube plugin.

YouTube in Frontend

Depending on the settings chosen in the plugin, videos, playlists and channels can look very different. On our preview page you can see some examples showing how different settings affect the look in the frontend.

Vimeo

With the Vimeo plugin, Vimeo videos can be displayed on a TYPO3 page without having to download videos and upload them again in the system. In addition, the content element, like the YouTube plugin, has various options with which the display of the videos can be individually adapted.

Reiter Plug-In

Plugin Options

The following options are available. These are similar to the options for the YouTube plugin. When editing the Vimeo content element, you can therefore follow the YouTube instructions.

  • Video ID, channel name, showcase
  • IDs of the videos to exclude
  • Maximum Amount
  • Show Videos Titles & Show Video Descriptions
  • Play video not in the lightbox, but directly on the web page(Desktop & Mobile)
  • Custom Thumbnail for the Videos
  • Show API Result

Vimeo Video IDs

Vimeo Channel Name

To add a channel name, copy from the link of the channel everything that comes after vimeo.com/channels/ and paste it into line for the ID/name.

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

Vimeo Showcase ID

To add a video ID, copy from the link of the video everything that comes after vimeo.com/showcase/  and paste it into line for the ID.

  • Showcase Link: vimeo.com/showcase/vimeocanhelp
  • Showcase ID: vimeocanhelp
Vimeo Video ID

To add a video ID, copy from the link of the video everything that comes after vimeo.com/ and paste it into line for the ID.

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

Content Area

In the content area you will see an overview of the settings you have made in the Vimeo plugin.

Vimeo im Frontend

Depending on the settings made, the result in the frontend can look very different. In our preview page you can see some examples of this.

FAQ

What is an embedded video?

An embedded video is a video that is integrated in a web page and played directly from there without the user having to switch to another website or external player. It is often provided by video sharing platforms such as YouTube or Vimeo and can be inserted on other websites through an embed code.

What is a media library?

A media library is a collection of media files such as videos, audio, images and documents that are stored and managed centrally. Media libraries are often used by organizations, companies, websites and social media platforms to manage and share their digital content. By using a media library, one can easily access all media files and use them in other contexts without having to upload them again each time.

What video sharing websites are there?

There are a variety of video portals, some of the most well-known include: YouTube, Vimeo, Dailymotion, Facebook Video, Twitch, TikTok, Instagram TV (IGTV), LinkedIn Video, Twitter Video.

However, this is just a short list, there are many other video portals that vary depending on the target audience and purpose.

What are quotas for YouTube videos?

YouTube video quotas are limits set on the number of views of a video or the number of calls to a playlist on a specific website or domain. These limits are established by YouTube to regulate and monitor the use of video and playlist content. Quotas can be used in various ways, such as limiting the use of content for commercial purposes or ensuring that a video is only used on specific websites. When a quota is reached, the video or playlist may no longer be displayed on the affected website.

 

Can you use Vimeo for free?

There is a free version of Vimeo that allows users to upload and share videos. However, certain features and options such as unlimited storage capacity, advanced analysis tools, and the ability to link videos with a custom domain are limited to the paid version.

 

 

[1] There is no guarantee for permanent availability or support of the software. Licensees may use the software during the license period as long as it is officially supported and available.

Contact us

You are interested in the TYPO3 video extensions sg_youtube and sg_vimeo or in one of our other products? You would like to use our services? – Then simply contact us with your request. We are looking forward to your message!