NEW: SG AI – Your AI Assistant for TYPO3 – SEO, (image-)text, images & more!
TYPO3 Extension for YouTube, Vimeo & Local Videos.
A centralized solution for embedding individual videos, playlists, channels, showcases, and local video files in TYPO3
A centralized solution for embedding individual videos, playlists, channels, showcases, and local video files in TYPO3
Anyone looking to embed videos in TYPO3 will quickly find that the built-in tools have their limitations. While external platforms like YouTube or Vimeo can generally be integrated using HTML, and local videos can be embedded via the file list, this is often insufficient in practice for convenient editorial management, a consistent look and feel, and flexible display options.
With sg_video, a modern, centralized TYPO3 extension is now available that combines the previous solutions, sg_youtube and sg_vimeo, into a single successor. Instead of maintaining multiple extensions in parallel, editorial teams and integrators now have a unified solution for YouTube, Vimeo, and local TYPO3/FAL videos in a single content element. The familiar features are retained and expanded to include support for locally hosted videos.
The extension supports the embedding of individual videos, channels, playlists, and Vimeo showcases. Additionally, local video files can be embedded directly from TYPO3. Consistent display and control options are available for all sources, such as various layouts, lightbox or inline playback, title and description display, filter functions, and custom thumbnails. The demo explicitly shows both YouTube and Vimeo content as well as locally hosted videos within the same extension.
This allows you to create a centralized video solution for TYPO3 websites with minimal effort: from individual embedded videos to extensive media libraries featuring content from various sources.
Compatibility
| TYPO3 Versions | 13.4.X | 14.X |
| PHP Versions | 8.3.X |
| Tested Browsers | Evergreen Browsers |
To the Release Notes
Media library in a snap
Do you run a YouTube or Vimeo channel and want to set up a media library on your company website featuring content from various video sources? With sg_video, you can do this quickly and easily in TYPO3. The extension combines YouTube, Vimeo, and local videos into a single content element. This makes it just as easy to embed entire channels, playlists, or showcases as it is to embed individual videos. Video files managed locally in TYPO3 can also be seamlessly integrated and customized to match the website’s design.
Easily embed videos, channels and playlists/showcases using IDs
The integration process is intentionally kept simple: For YouTube and Vimeo, simply enter the respective video, channel, playlist, or showcase ID in the content element of sg_video, and the desired content will be embedded directly into TYPO3. Alternatively, you can select and use local video files from the TYPO3 file system. This allows for flexible video integration with minimal effort, without having to switch between different extensions.
Control layout & behavior
With sg_video, videos from various sources can be presented with a consistent look. At the same time, there is plenty of flexibility for customization: Using the available settings for layout, information, thumbnails, and behavior, individual videos can be highlighted or integrated into thematic video overviews. Depending on your needs, you can display titles and descriptions, play videos in a lightbox or directly on the page, and use different layouts. The interface remains clear and user-friendly for editorial 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.
Filter
You can easily filter entire video channels in the TYPO3 backend according to desired search terms so that only relevant videos are displayed on your website.
If you have numerous videos, you also have the option of activating filters in the frontend so that your users can search specifically for content in the video media library This keeps the overview clear and your visitors can find the videos that are of interest to them more quickly This not only optimizes the user experience, but also promotes interactivity and dwell time on your website
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.
Table of contents
1 Technical Documentation: API Keys, Installation & Integration
1.1 YouTube
1.1.1 YouTube API Key
1.1.2 YouTube TYPO3 Extension: Installation & Integration
1.2 Vimeo
1.2.1 Vimeo Client ID and Client Secret
1.2.2 Vimeo Personal Access Token
1.2.3 Vimeo TYPO3 Extension: Installation & Integration
1.3 Add license key
2 Editorial documentation: Plugin content elements
2.1 YouTube Plugin
2.2 Vimeo Plugin
To ensure that no questions remain unanswered, we have compiled a comprehensive set of documentations for our users of the TYPO3 Video Extensions. These guides take you step by step through the installation and integration of the YouTube and Vimeo extensions, and show you how to use the content elements that you will find in your TYPO3 instance after successful configuration.
1.1 YouTube
1.1.1 YouTube API Key
The TYPO3 extension for YouTube videos needs a YouTube API key to function correctly. Proceed as follows to get the API key for the YouTube API. We assume in this tutorial that you already have a Google account and are logged in.
- Go to Google Cloud Console: https://console.cloud.google.com/
If you have not yet signed in to Google Cloud Console, the sign in window will appear. There you need to select your country and accept the terms of service. After that, click Agree and continue.
- Create a new project: Click New Project in the project selection. Enter a name for the project and click Create. Creating the project may take some time. Once the new project is 'ready', it will display notifications.
- Select project: Click Select Project directly in the notifications, or go to project selection as shown in the previous step and select the project you just created.
- Open the API library: Click the APIs and Services > Library button in the left menu. Here you will find all available APIs/Services.
- Enable YouTube API: Scroll down the library until you see YouTube APIs or use the search bar. Click on the API YouTube Data API v3, and then click Activate on the API details page and you will be taken to the API/Service details.
- Create credentials and generate API key: For the API key, you must now click the Create credentials button. After that, you need to select the API (if not preselected). In our case, this is YouTube Data API v3. For the question 'What data will you be accessing?' select the checkbox 'Public data' and then click Next. Now you will already see your API key, which you can copy and use directly. Click Done.
- View and copy API key: Go to APIs and Services > Credentials to find the created API key at any time.
You have created the YouTube API key! – Enter the YouTube API key in the place as described in the TypoScript Integration section of the documentation below.
1.2 Vimeo
1.2.1 Vimeo Client ID and Client Secret
The TYPO3 extension for Vimeo videos needs a Vimeo Client ID and Client Secret to work correctly. We show you how to get the keys for the Vimeo API. We assume that you already have a Vimeo account and are logged in. If this is not the case, you have to register and/or log in to Vimeo beforehand (https://vimeo.com/).
You have already created a Vimeo App and only need Client ID and Client Secret for our TYPO3 Vimeo Extension? - Then go directly to the Apps on the Vimeo Developer page (https://developer.vimeo.com/apps). You can get there with the link just mentioned or via User Settings > API Apps. Click on the corresponding app and read out the necessary data as described in the following section.
- Go to the Vimeo Developer page: https://developer.vimeo.com/
- Create an App: Click the Create an App or Get started button to create a new app.
- Enter the details of the app: Choose a name for the app and fill in the description. Select 'No. The only Vimeo accounts that will have access to the app are my own.' for the question 'Will people besides you be able to access your app?' Agree to the Vimeo API License Agreement and the Vimeo Terms of Use and click Create app.
- After creating the app, you will be taken directly to the overview of the app. There you will find the required data. On the left you will find a menu that allows you to jump directly to the desired item.
- At the top of the information under General Information you will find the Client ID or the Client Identifier. You can copy this at any time or whenever necessary.
- Under Manage App Secrets you will find the Vimeo Client Secret. You can also copy this at any time.
IMPORTANT: You must make sure that the account associated with the clientId and clientSecret API keys has the right permissions to search in the channel where the filters are being used. Otherwise searching for a query string will always result in an empty result set.
1.2.2 Vimeo Personal Access Token
If you want to show a Vimeo video on your website that is not publicly available, you need a Personal Access Token. Follow these steps to create a personal access token.
- If you have already created a Vimeo app, click the appropriate app in the app overview (https://developer.vimeo.com/apps/new).
- If you haven't created an app yet, proceed as described in the 'Vimeo Client ID and Client Secret' section above.
- Click Generate Access Token in the menu on the left. Select the 'Authenticated (you)' checkbox. Then select under Scopes: 'Public (required)' and 'Private'. This ensures long-term access to the data, you can read more about this on the Vimeo page on authentication: https://developer.vimeo.com/api/authentication. Click Generate.
- The personal access token now appears in the menu under Personal Access Token. You should copy this token and treat it like a password.
Note: As soon as you leave the page and/or reload it, you will no longer be able to copy the access token. It will be unrecognizable afterwards. However, it is always possible to create a new personal access token for a Vimeo app or to delete it.
Read more about the process of creating a Vimeo Personal Access Token in the official Vimeo documentation, at: https://help.vimeo.com/hc/en-us/articles/12427789081745-How-do-I-generate-a-personal-access-token
Enter the Vimeo Keys in the place as described in the TypoScript Integration section of the documentation below.
The Video content element allows you to embed YouTube, Vimeo, and local videos directly on a TYPO3 page. The previously separate extensions “sg-vimeo” and “sg-youtube” have been merged into “sg-video.” Instead of a plug-in, a dedicated content element is now used, which centrally provides the previous functions.
Settings tab
The following options are available to you.
Settings
- Provider (YouTube / Vimeo / Local Video)
- Type (Video / Channel / Showcase)
- Video ID, channel name, or showcase: In the section on YouTube/Vimeo IDs below, we show you where to find the IDs.
- Video IDs to exclude
- Query text
- Maximum number
- Additional URL parameters: You can use this field to add additional parameters for further customization. This only works if videos are played directly on the page. For more information on parameters, see: https://help.vimeo.com/hc/en-us/articles/12426260232977-About-Player-parameters.
- Filter
Appearance
- Layout Type
- Show video titles & show video descriptions
- Character limit for titles & descriptions
- Custom thumbnails for videos
Behavior
- Play the video directly on the website instead of in the lightbox
- Display API result
Vimeo Video IDs
Vimeo Channel Name
NOTE: Vimeo has restricted the use of channels for visitors from the EU and the United Kingdom.
In some cases, videos may not display even if you have used a valid channel ID.
To add a channel ID, copy everything from the channel's link that comes after vimeo.com/channels/ and paste it into the ID field.
- Channel link:
vimeo.com/channels/staffpicks - Channel Name:
staffpicks
Vimeo Showcase ID
To add a Showcase ID, copy everything from the Showcase link that comes after vimeo.com/showcase/ and paste it into the ID field.
- Showcase link:
vimeo.com/showcase/vimeocanhelp - Showcase ID:
vimeocanhelp
Vimeo Video ID
To add a video ID, copy everything from the video link that comes after vimeo.com/ and paste it into the ID field.
- Video link:
vimeo.com/246107487 - Video ID:
246107487
IMPORTANT: You must ensure that the account associated with the API keys clientId and clientSecret has the correct permissions to search the channel where the filters are used. Otherwise, searching for a query string will always return an empty result set.
YouTube IDs
YouTube Channel ID
There are several ways to find the channel ID, since it has not been visible in the URL for some time now. If you’re looking for the ID of your own YouTube channel, you can find the sequence of letters and numbers in your account’s advanced settings. You can find instructions from Google here.
If you need the channel ID for any YouTube channel, you’ll need to open the desired channel on YouTube. In the channel description, click ‘more’ and then click Share channel in the window that appears. There you’ll find the option ‘Copy channel ID’. You can then paste the copied ID into the YouTube extension.
Simply paste the channel ID into the plugin and configure any other settings you need.
YouTube Playlist ID
To add a playlist ID, copy everything from the playlist link that comes after list= and paste it into the ID field.
- Playlist link:
www.youtube.com/watch?v=rrVDATvUitA&list=PLmhUZw8WWzebYTvtVWHkb_YMgKARy6UON - Playlist ID:
PLmhUZw8WWzebYTvtVWHkb_YMgKARy6UON
YouTube Video ID
To add a video ID, copy everything from the video link that comes after watch?v= and paste it into the ID field.
- Video link:
www.youtube.com/watch?v=IBAhAk0-sPo - Video ID:
IBAhAk0-sPo
Content Area
In the content area, you'll see an overview of the settings you've configured in the content element.
Videos on the Frontend
Depending on the settings you've chosen, the result may look very different in the front end. On our preview page, you can see some examples of this.
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.
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.
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.
'YouTube No Cookie' is an option that allows for YouTube videos to be embedded on websites without setting cookies. Usually, when playing a YouTube video on a website, cookies are set to collect and analyze information about the user's behavior. By using 'YouTube No Cookie', cookies can be prevented from being set, improving privacy settings. To use 'YouTube No Cookie', the embed code of the video must be changed to www.youtube-nocookie.com instead of www.youtube.com.
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.
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.
An API (application programming interface) is an interface between software programs that enables communication and data exchange between them.
For example, if you want to create a media library with videos from YouTube or Vimeo, you can use their APIs. The API allows you to access and retrieve videos from the video platform without having to download them or host them yourself. The APIs also give access to information about the videos, such as title, bscription, and keywords. In addition, information about the channel that uploaded the video can be retrieved, and the number of views, likes, and comments on the video can be obtained.
Overall, an API is a useful tool for developers to leverage data and functionality from different systems without having to code everything from scratch.
An API key, API key, or API token is a special code/access key used to gain access to an API. It is used to authorize and control access to the API.
Anyone who wants to use an API usually has to register with the API provider to obtain an API key. The API key is unique and is generated by the API platform. The key is used when a request is made to the API to authorize access to the data. API keys can also be used to restrict or extend access to specific functions or data within the API.
Overall, the API key is an important mechanism to ensure that only authorized users can access the API's data and functions, and to prevent unauthorized people or applications from using the API.
[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.
