TYPO3 Extensions für YouTube & Vimeo Videos

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

• Additional URL parameters won't get passed to the iframe inside the lightbox, this is seemingly caused by Plyr's integration of the YouTube API
  • See also https://github.com/sampotts/plyr/issues/218#issuecomment-849942139
  • Workaround: disable the lightbox for your YouTube video

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

• Create a new vimeo app: https://developer.vimeo.com/apps/new
• Answer the question Will people besides you be able to access your app? with: No. The only Vimeo accounts that will have access to the app are my own.
• Go to your vimeo app on https://developer.vimeo.com/apps and copy your client identifier & client secret.

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

• Additional URL parameters won't get passed to the iframe inside the lightbox, this is seemingly caused by Plyr's integration of the Vimeo API
  • See also https://github.com/sampotts/plyr/issues/218#issuecomment-849942139
  • Workaround: disable the lightbox for your Vimeo video