Embedding Video Portals

Probably the easiest way to embed videos on a website is using well-known portals such as YouTube or Vimeo. There you get a snippet of code that you can simply insert as an HTML content element.

Steps

  1. Upload your video to the respective portal (here: YouTube).
  2. Copy the embed code for showing the video on your own website.
  3. In the TYPO3 backend, create a new content element on the desired page: "Special Elements" → "HTML".
  4. Paste the embed code under "HTML Code" and save.

The result looks like the video above.

Serving Videos From Your Own Server

The second way to display videos with TYPO3 is serving them directly from your own server. In its simplest form, you upload the video (e.g. via FTP, if the file size requires it) and then embed it on the desired page as a video content element – you can see an example of this in our article on Keyboard Shortcuts in TYPO3.

Different Video Formats & Subtitles

Since different browsers (Chrome, Firefox, Edge, Safari, etc.) and devices (tablets, smartphones, etc.) each only support certain formats, you should provide the video in at least three formats: MP4, OGV and WebM. One way to convert videos is the website convertio.co.

In addition, subtitles should be provided for every video as a separate text file (e.g. in VTT format). This makes the website more accessible, more user-friendly (for visitors who can't or don't want to play audio), and last but not least more search-engine friendly: search engines can't interpret the content of videos, but they can read the text file just fine.

Providing both alternative video formats and subtitles is handled directly by our video content element.

Source Code of the <video> Tag

Such a video element generates HTML with <source> attributes for the available video formats, <track> for the subtitle file, and a default error message in case none of the formats can be played. This is what the source code looks like:

<video id="video" controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogv" type="video/ogg" />
  <source src="video.webm" type="video/webm" />
  <track label="English" kind="subtitles" srclang="en" src="video.vtt" default />
  Your browser does not support the video tag.
</video>

Conclusion

Both approaches have pros and cons.

Embedding a video from a portal is very simple and spares your own server capacity – not just in terms of storage space, but also load time, which is an important ranking criterion for search engines.

But serving a video from your own server can also make sense (full control, no ads) or even be necessary (legal considerations, for example if clients don't have access to YouTube).