Skip to content

Modules

Text Video

Usage:

For embedding videos from external platforms.

Recommendation:

A HLS stream from servers in germany (i.e. hosted by videotaxi) is our recommendation regarding privacy.

Module Definition:

One video per module
Basic configuration analog to Text Image
Select for streaming provider: HLS/M3U8 (universal), Vimeo or Youtube (if necessary limit selection)
Field for Video Id / HLS Manifest
Field for Text (RTE), optional
Select for Video Alignment (top / bottom / left / right), Default: top
Select for Content Alignment (left, center, right), Default: left
Field for Preview Image, optional, if no preview image, fallback is fetched from streaming provider (only vimeo/youtube)
Layer for explicit consent to external content (integrated in privacy layer, not necessary for hls videos hosted on german servers)

Accessibility Features:

Separate tab for A11y features (all settings optional)
Field for alternative video id + field for button label (alternative video can be displayed in the frontend below the video via button)
Field for alternative text (transcript / text version) + field for button label (alternative text can be displayed in the frontend below the video via button)

LOWRIDER

Yeah, No Vertical Limit 🤘

Vimeo also supports aspect ratios outside the norm. Thus, vertical videos or ultrawide videos can also be integrated into the page. The player automatically adapts to the video. With autoplay enabled and hidden controls, images come to life.

Allright 👉

Wide Wide West

Almost Invisible

When content is carefully selected, it blends almost seamlessly with the page.

Youtube

Of course, the module also supports Youtube videos, although it is not the first choice when it comes to seamless integration into websites.

Accessibility Features

If the available options in the video player itself (e.g. subtitles) are not sufficient, a transcript or even an alternative video can be stored if required. The additional variants can be shown/hidden below the video.

Of course, these functions can also be used for enriching video content.

Technical Notes:

Branding cannot be completely removed from Youtube.

Skimmed autoplay videos are paused when scrolling outside the visible area.

Via oembed, server-side information about the video is fetched and cached. Among other things, the width and height of the video. With these values, we can already calculate the aspect ratio before the page is fully loaded and "reserve" the required space. Unfortunately, this only works for Vimeo. Youtube unfortunately returns wrong widths and heights.

Also, on the server side, we retrieve the preview images/thumbnails deposited with the hoster and store them on our server. Thus, we can display them to the user in compliance with DSGVO, even before he has agreed to the loading of embedded videos.

The thumbnails are cached locally under typo3temp/assets/images/. From there TYPO3 can also create thumbnails as usual (for example without Thumbor). They are then located in the default folder typo3temp/assets/processed/.

We have 2 caches for the oembed data.

JSON Cache

We cache all JSON Responses via TYPO3 Core CacheFramework (See EXT: nb/ext_localconf.php -> nb_oembed) Lifetime is "infinite". Cache can only be cleared via the red button and then rebuilds itself automatically in the frontend.

Thumbnail Cache

We cache the images from $oemebd->thumbnail_url locally on our server (download via CURL). These are then retrievable as $oembed->thumnail_url_local (see source code). Lifetime is "infinite". Cache can only be removed via Maintenance (Install Tool) at "Remove Temporary Assets" => Empty both: typo3temp/assets/images and typo3temp/assets/processed (Only for non-Thumbor).

Privacy Settings

This site uses cookies and third party elements to provide you with certain features and an optimal website experience. These include cookies that are strictly necessary for the operation of the site, cookies for anonymous statistical analysis/measurement, and the embedding of external services whose use you must consent to prior to use. You can find more information below in the notes on the individual functions and in detail in our privacy policy.

Technical Cookies

These cookies are necessary to enable the basic functions of our website.

External Contents

This consent allows you to view external contents (via iframe).

Embedded Maps

This consent allows you to view embedded maps.

Embedded Videos

This consent allows you to watch embedded videos.

Google Analytics

Google Analytics records your page views for anonymous statistical purposes. Your IP address is anonymized before transmission.

Settings saved