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 mitgelieferte 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 Datenschutzebene wiedergegeben, 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 Klick

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

Nach dem Klick

• Datenschutz-Overlay durch den dienstspezifischen IFrame ersetzt
  • YouTube → Einbettung eines datenschutzoptimierten YouTube-IFrames
  • Vimeo → Einbettung des Vimeo-Players
  • SoundCloud → SoundCloud-Widget-iframe (visueller Wellenformmodus)
• Automatische Wiedergabe aktiviert (sofortige Wiedergabe)
• Ab diesem Punkt gilt die Datenschutzerklärung des jeweiligen Dienstes
• Bei SoundCloud entspricht die URL des Widget-iframe 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).

Benutzererlebnis

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 laden YouTube und Vimeo ihre eigenen Einbettungsplayer; 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 – Die 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. Track 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
• (Standalone-Version von 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

<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>

Funktionen

Datenschutz

• Keine externen Anfragen vor der Einwilligung
• Keine Cookies bis zur Benutzerinteraktion
• 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)

iframe-Konfiguration

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 auch 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/Springen/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 - „Um das Widget zu aktivieren...“
• 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 (Modul „Liste“ → „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 der 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, um den neuen Typ zu verarbeiten

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 wird (standardmäßig mpc-vidply ist dies nicht der Fall, da externe Dienste den Iframe-Pfad der Datenschutzebene verwenden). Dies können Sie erreichen, indem Sie VidPlyProcessor , um $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 leichtgewichtigen 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. Überprüfen, ob beim Laden der Seite keine externen Anfragen erfolgen
3. Auf die Wiedergabetaste klicken
4. Überprüfen, ob das Iframe sofort geladen und abgespielt wird
5. Mehrsprachige Websites testen (EN/DE)

Leistung

• Keine Auswirkungen bis zur Benutzerinteraktion
• ~5 KB JavaScript (PrivacyLayer.js)
• ~2 KB CSS (privacy-layer.css, wird bedingt geladen)
• Keine VidPly-Initialisierung für externe Dienste
• Nach dem ersten Laden zwischengespeichert
• Datenbankabfragen werden von TYPO3 zwischengespeichert