Data protection layer

Overview

External content is only loaded once the user has given their explicit consent, thereby preventing tracking before any interaction takes place.

The backend text for each provider is edited under “List → Privacy Layer Settings” (the “YouTube”, “Vimeo” and “SoundCloud” tabs):

Supported services

 

About the SoundCloud renderer

The included VidPly player contains a special SoundCloudRenderer (src/renderers/SoundCloudRenderer.ts) that integrates the SoundCloud widget API into the standard VidPly controls for play, pause, seek and volume. In mpc-vidply SoundCloud is normally played via the privacy layer, which loads the SoundCloud widget iframe immediately after consent is given – the widget provides its own user interface. If you vidply embed a standalone player (or PrivacyLayer.html embed it partially), you can choose the renderer-based approach to achieve fully consistent VidPly controls for SoundCloud playback.

 

How it works

Before clicking

• Overlay of the ‘Play’ button with a poster image
• Privacy policy with a link to the policy
• No external requests
• No tracking scripts loaded

After clicking

• Privacy overlay replaced by the service-specific IFrame
  • YouTube → Embedding of a privacy-optimised YouTube iframe
  • Vimeo → Embedding of the Vimeo player
  • SoundCloud → SoundCloud widget iframe (visual waveform mode)
• Autoplay enabled (instant playback)
• From this point onwards, the privacy policy of the respective service applies
• For SoundCloud, the URL of the widget iframe is the same as the URL used internally by VidPly SoundCloudRenderer – so the result visible to the user is identical; the only difference is who provides it (privacy layer vs. VidPly renderer).

User experience

Default text (YouTube/Vimeo):

 

“To play the video, you must click the button. Once you have clicked the button, Google’s privacy policy applies.”

 

Default text (SoundCloud):

 

“To activate the widget, you must click the button. Once the button has been clicked, SoundCloud’s privacy policy applies.”

 

 

For content editors: Once consent is given, YouTube and Vimeo load their own embed players; SoundCloud loads the widget iframe (waveform UI) rather than VidPly’s unified control bar – unless your website uses the advanced renderer override documented below.

 

Customisable – All privacy texts, links, headings and button labels can be configured in the backend.

Multilingual support – The privacy settings can be translated for each language.

German translations included – The switch is made automatically based on the language of the TYPO3 website.

Back-end configuration

Configuring settings for the privacy layer

List modules → Privacy layer settings

Create a record to customise the content of the privacy layer for YouTube, Vimeo and SoundCloud:

These settings support multilingual content via the TYPO3 translation system. Empty fields are automatically reset to the default translations.

Create media records

YouTube/Vimeo:

1. Create VidPly media record
2. Select the media type ‘YouTube’ or ‘Vimeo’
3. Add a video URL or use the TYPO3 Online Media Helper
4. Add a poster image (recommended)
5. Save

SoundCloud:

1. Create a VidPly media record
2. Select SoundCloud media type
3. Upload track or enter URL:
   • Title: soundcloud.com/user/track
   • Set: soundcloud.com/user/sets/playlist
4. Add a cover image (recommended)
5. Save

Technical implementation

Files

• Partials/VidPly/PrivacyLayer.html - Template for the consent layer
• JavaScript/PrivacyLayer.js - Delayed loading of iframes (YouTube/Vimeo/SoundCloud widgets)
• JavaScript/PlaylistInit.js - Handling the privacy layer for playlists
• Classes/Service/PrivacySettingsService.php - Retrieving privacy settings from the database
• Configuration/TCA/tx_mpcvidply_privacy_settings.php - Back-end configuration
• Resources/Public/Css/privacy-layer.css - Styles for the privacy layer
• Language files with translations
• (Standalone version of VidPly, optional) vidply/src/renderers/SoundCloudRenderer.ts - Renderer-based SoundCloud playback, embedded within the VidPly user interface

JavaScript

// Lazy iframe creation (only after click)
button.addEventListener('click', function() {
    const service = layer.getAttribute('data-vidply-privacy');
    const url = layer.getAttribute('data-vidply-url');
    
    // Create and insert iframe with autoplay
    layer.innerHTML = createIframe(service, url);
});

Template logic

<f:if condition="{vidply.serviceType}">
    <f:then>
        <!-- Privacy layer (YouTube, Vimeo, SoundCloud) -->
        <f:render partial="VidPly/PrivacyLayer" />
    </f:then>
    <f:else>
        <!-- VidPly player (video/audio, including HLS/DASH sources) -->
        <f:render section="VideoPlayer" />
    </f:else>
</f:if>

Features

Data protection

• No external requests before consent is given
• No cookies until user interaction
• GDPR-compliant
• Clear privacy notices
• Centralised backend configuration

User experience

• One-click activation
• Automatic playback (no double-click)
• Visual play button (VidPly-style)
• 16:9 aspect ratio is retained
• Customisable headings, text and links

Technical details

• Lazy iframe generation
• Service-specific embedding URLs
• Multilingual support (EN/DE + backend translations)
• Database-driven configuration
• Works for individual tracks and playlists
• Minimal overhead (~5 KB JS + CSS)

iframe configuration

YouTube

www.youtube-nocookie.com/embed/{ID}
?autoplay=1&rel;=0&modestbranding;=1

• Privacy-optimised domain
• No recommendations for similar videos
• Clean branding

Vimeo

player.vimeo.com/video/{ID}
?autoplay=1&title;=0&byline;=0&portrait;=0

• Clear user interface (no metadata)
• Autoplay enabled

SoundCloud

w.soundcloud.com/player/
?url={URL}&auto;_play=true&visual;=true&hide;_related=true

• Visual waveform (16:9)
• Clear user interface
• Works with tracks and sets/playlists
• The same URL is also used by the standalone VidPly application SoundCloudRenderer. Within mpc-vidply the privacy layer, this iframe is embedded directly (the SoundCloud widget provides its own controls for play, pause and progress). When using the standalone version of VidPly SoundCloudRenderer , the same iframe is embedded, but communication also takes place via the SoundCloud widget API, so that playback is controlled via VidPly’s own controls (play/pause/skip/volume).

Database structure

Table: tx_mpcvidply_privacy_settings

Site-wide configuration of the data protection level stored in the database:

Translations

Translations of the standard language file (fallback)

English:

• privacy.activate_intro - “To enable the video...”
• privacy.activate_intro_widget - “To enable the widget...”
• privacy.youtube.policy_link - “Google’s Privacy Policy”
• privacy.vimeo.policy_link - “Vimeo’s Privacy Policy”
• privacy.soundcloud.policy_link - “SoundCloud’s Privacy Policy”

German:

• privacy.activate_intro - “To enable the video...”
• privacy.activate_intro_widget - “To enable the widget...”
• privacy.youtube.policy_link - “Google’s Privacy Policy”
• privacy.vimeo.policy_link - “Vimeo’s Privacy Policy”
• privacy.soundcloud.policy_link - “SoundCloud’s privacy policy”

Note: The settings in the backend database take precedence over the translations in the language files.

Customisation

Changing the privacy policy text via the backend

Recommended: Use the privacy layer settings in the backend (’List’ module → ’Privacy layer settings’). This allows you to:

• Centralised management
• Multilingual support
• No code changes required
• Easy updates by editors

Modification of the privacy policy text via language files

Editing language files for default values:

<trans-unit id="privacy.activate_intro">
    <source>Your custom text</source>
    <target>Ihr eigener Text</target>
</trans-unit>

Note: Backend settings take precedence over the translations in the language files.

Custom styling

The styles for the privacy policy section are located in Resources/Public/Css/privacy-layer.css. Override these in your site package:

.vidply-privacy-layer {
    /* Your styles */
}

.vidply-privacy-button:hover svg {
    transform: scale(1.15);
}

.vidply-privacy-text .h6 {
    /* Customize headline styling */
}

Add further services

1. Add service to TCA media types
2. Add case in PrivacyLayer.js createXyzIframe()
3. Add translations
4. Update the DataProcessor to process the new type

Switch SoundCloud to renderer mode (advanced)

If you want SoundCloud playback to be controlled via VidPly’s native controls rather than via the SoundCloud widget’s user interface:

1. Override Partials/VidPly/PrivacyLayer.html so that, once consent has been given for SoundCloud, the partial <audio data-vidply src="{soundcloudUrl}"> element is embedded instead of a plain iframe.
2. Ensure that the VidPly core bundle for SoundCloud media is loaded (by default mpc-vidply this is not the case, as external services use the iframe path of the privacy layer). You can achieve this by VidPlyProcessor to $needsVidPlay = true if SoundCloud is present.
3. The bundled SoundCloudRenderer (which is automatically detected for any URL that soundcloud.com) then takes control and forwards VidPly’s functions for play, pause, seek, volume and progress bar via the SoundCloud widget API.

This is entirely optional – the default mpc-vidply modes retain the lightweight iframe approach, resulting in less JavaScript being loaded per page.

Browser support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile browsers

Testing

ddev typo3 cache:flush

1. Create test media (YouTube, Vimeo, SoundCloud)
2. Check that no external requests are made when the page loads
3. Click the play button
4. Check that the iframe loads and plays immediately
5. Test multilingual websites (EN/DE)

Performance

• No impact until user interaction
• ~5 KB JavaScript (PrivacyLayer.js)
• ~2 KB CSS (privacy-layer.css, loaded conditionally)
• No VidPly initialisation for external services
• Cached after the initial load
• Database queries are cached by TYPO3