Video VTT 

Extension key

video_vtt

Package name

traw/video-vtt

Version

2.6

Language

en

Authors

Thomas Rawiel and contributors

Rendered

Thu, 06 Nov 2025 12:12:21 +0000

Administration 

This chapter describes how to manage the extension from a superuser point of view.

Installation 

The extension needs to be installed as any other extension of TYPO3 CMS. Get the extension by one of the following methods:

1. Use composer: Run

   composer require traw/video-vtt

   Copied!

   in your TYPO3 installation.

2. Get it from the Extension Manager: Switch to the module Admin Tools > Extensions. Switch to Get Extensions and search for the extension key video_vtt and import the extension from the repository.
3. Get it from typo3.org: You can always get current version from TER by downloading the zip version. Upload the file afterwards in the Extension Manager.

Configuration 

After installation, no additional configuration is needed.

Only the backend user settings have to be changed

Backend user settings 

Each setting that is described in the Editors manual is configured as an exclude field.

That means each field has to be specifically allowed for the editor user or user group.

Switch to the Backend Users > Backend user groups module

Edit the user group and switch to the Access Rights tab._backend

To add and change tracks and time-based data, the group must be allowed to list and modify the File Metadata table.

To add and change poster images as well as change the video controls, the group must be allowed to list and modify the File Reference table.

In the Allowed excludefields section of the same group

1. go to the File Metadata table and allow the following fields:

• Poster Image (poster) [sys_file_metadata:poster]
• Text Tracks and Time-based Data (tracks) [sys_file_metadata:tracks]

2. go to the File Reference table and allow the following fields:

   • Video Controls:

     • Loop Video (loop) [sys_file_reference:loop]
     • Muted (mute) [sys_file_reference:mute]
     • Show Controls (controls) [sys_file_reference:controls]
     • Show info (showinfo) [sys_file_reference:showinfo]
     • Picture in picture (picinpic) [sys_file_reference:picinpic]
     • Controls List (Chromium Browsers) (controlslist) [sys_file_reference:controlslist]

   • Poster Image:

     • Poster Image (Override Poster from Metadata) (poster) [sys_file_reference:poster]

   • Tracks and time-based data:

     • Default attribute (track_default) [sys_file_reference:track_default]
     • Track label (track_label) [sys_file_reference:track_label]
     • Track language (track_language) [sys_file_reference:track_language]
     • Track type (track_type) [sys_file_reference:track_type]

Editors Manual 

Text tracks and time-based data 

Switch to the module File > Filelist.

Select the video where you want to add the vtt file and edit the metadata of the file

Switch to the Video tab and add or upload one or more vtt files

Track label A user-readable title of the text track which is used by the browser when listing available text tracks.

Track language Language of the track text data. It must be a valid BCP 47 language tag. (e.g. de, en, etc.)

Track type How the text track is meant to be used. (subtitles, captions, chapters, etc.)

Default attribute When active, adds the 'default' attribute to the rendered track.

Video controls 

For YouTube, Vimeo and local videos you can set certain attributes which are added to the video tag in the frontend.

List of available video controls 

Autoplay

Automatically play the video when the website is loaded

Muted

Mute the video

Loop Video

Automatically restart the video when it's finished playing

Show info

Option for youtube, information like the video title or uploader are shown in the player before playback begins

Show Controls

Display the players controls (play button, time track, etc.)

Controls List (Chromium Browsers)

Additional controls available for chromium browsers (Google Chrome, MS Edge, etc.) - available if Show Controls is enabled

Picture in picture

Add picture in picture control (Chromium browsers)

Poster Image 

For local videos, e.g. mp4 you can add a poster image that is added to the video.

This can either be done in the metadata of the video or in the file reference of the content element where the video is referenced.

Add poster image in file metadata 

Switch to the module File > Filelist.

Select the video where you want to add the poster image and edit the metadata of the file

Switch to the Video tab and add or upload an image for the Poster image field

Add poser image in file references 

For example in a textmedia element.

Add your video. In the video file reference you can now add your poster image

Index