Datenschutzschicht

Übersicht

Externe Inhalte werden erst nach ausdrücklicher Zustimmung des Nutzers geladen, wodurch ein Tracking vor der Interaktion verhindert wird.

Der Backend-Text für jeden Anbieter wird unter „Liste → Einstellungen der Datenschutzschicht“ (Registerkarten „YouTube“, „Vimeo“ und „SoundCloud“) bearbeitet:

Unterstützte Dienste

 

Über den SoundCloud-Renderer

Der integrierte VidPly-Player enthält eine spezielle SoundCloudRenderer (src/renderers/SoundCloudRenderer.ts), der die SoundCloud-Widget-API in die einheitlichen VidPly-Steuerelemente für Wiedergabe, Pause, Suchlauf und Lautstärke einbindet. In mpc-vidply SoundCloud wird normalerweise über die Datenschutzschicht gerendert, die den SoundCloud-Widget-iframe direkt nach der Einwilligung lädt – das Widget bringt seine eigene Benutzeroberfläche mit. Wenn Sie vidply einen eigenständigen Player einbettest (oder den PrivacyLayer.html teilweise) einbettest, kannst du den auf dem Renderer basierenden Weg wählen, um vollständig einheitliche VidPly-Steuerelemente für die SoundCloud-Wiedergabe zu erhalten.

 

So funktioniert es

Vor dem Klicken

• Overlay der „Wiedergabe“-Schaltfläche mit Posterbild
• Datenschutzerklärung mit Link zur Richtlinie
• Keine externen Anfragen
• Keine Tracking-Skripte geladen

Nach dem Klick

• YouTube / Vimeo (Standardeinstellung mpcVidply.embedChrome: vidply, Standard) – der VidPly-Player lädt das Einbettungselement des Anbieters über seinen YouTube-/Vimeo-Renderer und blendet darüber seine eigene Steuerleiste ein: Wiedergabe/Pause, Suchlauf, Lautstärke, Vollbild, Tastaturkürzel sowie die Begleittexte, Kapitel und das Transkript aus dem Reiter „Untertitel“ des Mediendatensatzes. Dies gilt sowohl für einzelne Elemente als auch für Titel in Wiedergabelisten.
• YouTube / Vimeo mit mpcVidply.embedChrome: provider — die Datenschutzebene wird durch den anbieter-eigenen IFrame ersetzt (datenschutzoptimierte YouTube-IFrame-Einbettung / Vimeo-Player-Einbettung); VidPly-Untertitel und -Transkript sind nicht verfügbar.
• SoundCloud – immer der SoundCloud-Widget-iframe (visueller Wellenformmodus), unabhängig von embedChrome.
• der automatischen Wiedergabe, sofern der Browser dies zulässt (iOS erhält stattdessen eine abspielbereite Einbettung)
• Ab diesem Punkt gilt die Datenschutzerklärung des jeweiligen Dienstes
• Bei SoundCloud entspricht die URL des Widget-iframes der URL, die VidPly intern SoundCloudRenderer intern verwendet – das für den Nutzer sichtbare Ergebnis ist also identisch; der einzige Unterschied besteht darin, wer es bereitstellt (Datenschutz-Layer vs. VidPly-Renderer).

Siehe „Einstellungen“ > „Architektur“ → „Steuerelemente für YouTube und Vimeo“ für die entsprechende Einstellung.

Benutzererfahrung

Standardtext (YouTube/Vimeo):

 

„Um das Video zu aktivieren, müssen Sie auf die Schaltfläche klicken. Nach dem Klicken auf die Schaltfläche gelten die Datenschutzbestimmungen von Google.“

 

Standardtext (SoundCloud):

 

„Um das Widget zu aktivieren, müssen Sie auf die Schaltfläche klicken. Nach der Aktivierung der Schaltfläche gilt die Datenschutzerklärung von SoundCloud.“

 

 

Für Inhaltsredakteure: Nach der Einwilligung werden YouTube- und Vimeo-Videos im VidPly-Player mit dessen Steuerleiste, Untertiteln und Transkript wiedergegeben – es sei denn, ein Integrator hat die Steuerung für YouTube und Vimeo auf provider, in diesem Fall wird der eigene Player des Anbieters angezeigt. SoundCloud lädt den Widget-iframe (Wellenform-UI) und nicht die einheitliche Steuerleiste von VidPly – es sei denn, Ihre Website nutzt die unten dokumentierte erweiterte Renderer-Überschreibung.

 

Anpassbar – Alle Datenschutztexte, Links, Überschriften und Schaltflächenbeschriftungen können im Backend konfiguriert werden.

Mehrsprachige Unterstützung – Datenschutzeinstellungen können für jede Sprache übersetzt werden.

Deutsche Übersetzungen enthalten – Die Umstellung erfolgt automatisch basierend auf der Sprache der TYPO3-Website.

Einrichtung im Backend

Einstellungen für die Datenschutzebene konfigurieren

Modul auflisten → Einstellungen für die Datenschutzebene

Erstellen Sie einen Datensatz, um den Inhalt der Datenschutzebene für YouTube, Vimeo und SoundCloud anzupassen:

Die Einstellungen unterstützen mehrsprachige Inhalte über das Übersetzungssystem von TYPO3. Leere Felder werden automatisch auf die Standardübersetzungen zurückgesetzt.

Mediendatensätze erstellen

YouTube/Vimeo:

1. VidPly-Mediendatensatz erstellen
2. Wählen Sie den Medientyp „YouTube“ oder „Vimeo“ aus
3. Fügen Sie eine Video-URL hinzu oder nutzen Sie den TYPO3-Online-Medien-Helper
4. Posterbild hinzufügen (empfohlen)
5. Speichern

SoundCloud:

1. VidPly-Mediendatensatz erstellen
2. SoundCloud-Medientyp auswählen
3. Titel einfügen oder URL eingeben:
   • Titel: soundcloud.com/user/track
   • Festlegen: soundcloud.com/user/sets/playlist
4. Posterbild hinzufügen (empfohlen)
5. Speichern

Technische Umsetzung

Dateien

• Partials/VidPly/PrivacyLayer.html - Vorlage für die Einwilligungsschicht
• JavaScript/PrivacyLayer.js - Verzögertes Laden von Iframes (YouTube-/Vimeo-/SoundCloud-Widget)
• JavaScript/PlaylistInit.js - Handhabung der Datenschutzebene für Wiedergabelisten
• Classes/Service/PrivacySettingsService.php - Abruf der Datenschutzeinstellungen aus der Datenbank
• Configuration/TCA/tx_mpcvidply_privacy_settings.php - Backend-Konfiguration
• Resources/Public/Css/privacy-layer.css - Stile für die Datenschutzebene
• Sprachdateien mit Übersetzungen
• (Eigenständiges VidPly, optional) vidply/src/renderers/SoundCloudRenderer.ts - Renderer-basierte SoundCloud-Wiedergabe, eingebettet in die Benutzeroberfläche von VidPly

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);
});

Vorlagenlogik

RenderDecisionResolver Schalter vidply.renderMode; Partials/VidPly/Player.html Schalter darauf:

<f:switch expression="{vidply.renderMode}">
    <f:case value="privacy">
        <!-- Single SoundCloud item, or single YouTube/Vimeo with embedChrome: provider -->
        <f:render partial="VidPly/PrivacyLayer" arguments="{...}" />
    </f:case>
    <f:case value="mixedPlaylist">
        <!-- Single YouTube/Vimeo (embedChrome: vidply) and playlists with external tracks:
             VidPly player behind the playlist privacy overlay -->
        <f:render partial="VidPly/MixedPlaylistPlayer" arguments="{_all}" />
    </f:case>
    <!-- "audio" / "video": VidPly player for local media, including HLS/DASH sources -->
</f:switch>

Funktionen

Datenschutz

• Keine externen Anfragen vor der Einwilligung
• Keine Cookies bis zur Interaktion des Nutzers
• DSGVO-konform
• Klare Datenschutzhinweise
• Zentralisierte Backend-Konfiguration

Benutzererfahrung

• Aktivierung mit einem Klick
• Automatische Wiedergabe (kein Doppelklick)
• Visuelle Wiedergabetaste (im VidPly-Stil)
• Seitenverhältnis 16:9 wird beibehalten
• Anpassbare Überschriften, Texte und Links

Technische Details

• Lazy-Iframe-Erstellung
• Dienstspezifische Einbettungs-URLs
• Mehrsprachige Unterstützung (EN/DE + Backend-Übersetzungen)
• Datenbankgestützte Konfiguration
• Funktioniert für einzelne Titel und Wiedergabelisten
• Minimaler Overhead (~5 KB JS + CSS) bei ausschließlicher Nutzung der Datenschutzebene (SoundCloud oder YouTube/Vimeo mit embedChrome: provider)

iframe-Konfiguration

Die folgenden URLs sind die Einbettungen, die die Datenschutzschicht direkt einbindet (SoundCloud sowie YouTube/Vimeo mit embedChrome: provider). Im Standardmodus vidply Modus erstellen die VidPly-Renderer für YouTube und Vimeo die Einbettung selbst und blenden die anbieter-eigenen Steuerelemente aus.

YouTube

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

• Datenschutzoptimierte Domain
• Keine Empfehlungen für ähnliche Videos
• Sauberes Branding

Vimeo

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

• Übersichtliche Benutzeroberfläche (keine Metadaten)
• Automatische Wiedergabe aktiviert

SoundCloud

w.soundcloud.com/player/
?url={URL}&auto_play=true&visual=true&hide_related=true

• Visuelle Wellenform (16:9)
• Übersichtliche Benutzeroberfläche
• Funktioniert mit Tracks und Sets/Playlists
• Die gleiche URL wird von der eigenständigen VidPly-Anwendung SoundCloudRenderer. In mpc-vidply der Datenschutz-Layer wird dieser Iframe direkt eingebunden (das SoundCloud-Widget stellt seine eigenen Steuerelemente für Wiedergabe, Pause und Fortschrittsanzeige bereit). Bei der Nutzung der VidPly-Standalone-Version SoundCloudRenderer wird derselbe Iframe eingebunden, es erfolgt jedoch zusätzlich eine Kommunikation über die SoundCloud-Widget-API, sodass die Wiedergabe über die VidPly-eigenen Steuerelemente (Wiedergabe/Pause/Suchen/Lautstärke) gesteuert wird.

Datenbankstruktur

Tabelle: tx_mpcvidply_privacy_settings

In der Datenbank gespeicherte, siteweite Konfiguration der Datenschutzebene:

Übersetzungen

Übersetzungen der Standard-Sprachdatei (Fallback)

Englisch:

• privacy.activate_intro - „Um das Video zu aktivieren...“
• privacy.activate_intro_widget - „So aktivieren Sie das Widget...“
• privacy.youtube.policy_link - „Googles Datenschutzerklärung“
• privacy.vimeo.policy_link - „Datenschutzerklärung von Vimeo“
• privacy.soundcloud.policy_link - „Datenschutzerklärung von SoundCloud“

Deutsch:

• privacy.activate_intro - „Um das Video zu aktivieren...“
• privacy.activate_intro_widget - „Um das Widget zu aktivieren...“
• privacy.youtube.policy_link - „die Datenschutzerklärung von Google“
• privacy.vimeo.policy_link - „die Datenschutzerklärung von Vimeo“
• privacy.soundcloud.policy_link - „die Datenschutzerklärung von SoundCloud“

Hinweis: Die Einstellungen in der Backend-Datenbank haben Vorrang vor den Übersetzungen in den Sprachdateien.

Anpassung

Datenschutztext über das Backend ändern

Empfohlen: Verwenden Sie die Einstellungen für die Datenschutzebene im Backend (Listenmodul → Einstellungen für die Datenschutzebene). Dies ermöglicht:

• Zentrale Verwaltung
• Mehrsprachige Unterstützung
• Keine Code-Änderungen erforderlich
• Einfache Aktualisierungen durch Redakteure

Änderung des Datenschutztextes über Sprachdateien

Sprachdateien für Standardwerte bearbeiten:

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

Hinweis: Backend-Einstellungen haben Vorrang vor den Übersetzungen in den Sprachdateien.

Individuelles Styling

Die Stile für die Datenschutzebene befinden sich in Resources/Public/Css/privacy-layer.css. Überschreiben Sie diese in Ihrem Sitepackage:

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

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

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

Weitere Dienste hinzufügen

1. Dienst zu TCA-Medientypen hinzufügen
2. Fall hinzufügen in PrivacyLayer.js createXyzIframe()
3. Übersetzungen hinzufügen
4. Aktualisieren Sie den DataProcessor für die Verarbeitung des neuen Typs

SoundCloud in den Renderer-Modus umschalten (fortgeschritten)

Wenn Sie möchten, dass die SoundCloud-Wiedergabe über die nativen Steuerelemente von VidPly statt über die Benutzeroberfläche des SoundCloud-Widgets gesteuert wird:

1. Überschreiben Sie Partials/VidPly/PrivacyLayer.html so, dass nach der Einwilligung für SoundCloud das Partial ein <audio data-vidply src="{soundcloudUrl}"> Element anstelle eines reinen iframe einbindet.
2. Stellen Sie sicher, dass das VidPly-Kern-Bundle für SoundCloud-Medien geladen ist (standardmäßig mpc-vidply ist dies nicht der Fall, da externe Dienste den Iframe-Pfad der Datenschutzebene verwenden). Sie können dies erreichen, indem Sie VidPlyProcessor , um festzulegen, $needsVidPlay = true , wenn SoundCloud vorhanden ist.
3. Das gebündelte SoundCloudRenderer (wird automatisch für jede URL erkannt, die soundcloud.com) übernimmt dann die Steuerung und leitet die Funktionen von VidPly für Wiedergabe, Pause, Suchlauf, Lautstärke und Fortschrittsanzeige über die SoundCloud-Widget-API weiter.

Dies ist rein optional – der Standard- mpc-vidply behält den schlanken iframe-Pfad bei, wodurch pro Seite weniger JavaScript geladen wird.

Browser-Unterstützung

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

Testen

ddev typo3 cache:flush

1. Testmedien erstellen (YouTube, Vimeo, SoundCloud)
2. Prüfen, ob beim Laden der Seite keine externen Anfragen erfolgen
3. Auf die Wiedergabetaste klicken
4. Überprüfen Sie, ob das Video abgespielt wird – bei YouTube/Vimeo mit der VidPly-Steuerleiste sowie Ihren WebVTT-Untertiteln und dem Transkript, sofern diese vorhanden sind
5. Wechseln mpcVidply.embedChrome zu provider, leeren Sie die Caches und überprüfen Sie, ob stattdessen der eigene Player des Anbieters angezeigt wird
6. Testen Sie mehrsprachige Websites (EN/DE)

Leistung

• Keine externen Anfragen bis zur Benutzerinteraktion
• ~5 KB JavaScript (PrivacyLayer.js)
• ~2 KB CSS (privacy-layer.css, bedingt geladen)
• Keine VidPly-Initialisierung für einzelne SoundCloud-Elemente und für einzelne YouTube-/Vimeo-Elemente mit embedChrome: provider; im Standardmodus vidply Modus wird der VidPly-Kern für YouTube/Vimeo geladen (siehe AssetLoading)
• Nach dem ersten Laden zwischengespeichert
• Datenbankabfragen werden von TYPO3 zwischengespeichert