Datenschutzschicht

Übersicht

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

Unterstützte Dienste

 

Über den SoundCloud-Renderer

Der gebündelte VidPly-Player enthält eine spezielle SoundCloudRenderer (src/renderers/SoundCloudRenderer.ts), der die SoundCloud-Widget-API in die einheitlichen Wiedergabe-/Pause-/Such-/Lautstärkeregler von VidPly 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 Standalone-Version ein (oder die PrivacyLayer.html teilweise) einbettest, kannst du den Renderer-basierten Pfad wählen, um vollständig einheitliche VidPly-Steuerelemente für die SoundCloud-Wiedergabe zu erhalten.

 

So funktioniert es

Vor dem Klicken

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

Nach dem Klick

• Datenschutz-Layer durch den dienstspezifischen IFrame ersetzt
  • YouTube → datenschutzoptimierte YouTube-IFrame-Einbettung
  • Vimeo → Vimeo-Player-Einbettung
  • 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-IFrames der URL, die VidPly intern verwendet SoundCloudRenderer intern verwendet – das für den Nutzer sichtbare Ergebnis ist also identisch, der einzige Unterschied besteht darin, wer es bereitstellt (Datenschutzebene vs. VidPly-Renderer).

Benutzererfahrung

Standardtext (YouTube/Vimeo):

 

„Um das Video zu aktivieren, müssen Sie auf die Schaltfläche klicken. Nach der Aktivierung der 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.“

 

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 – Wechselt automatisch basierend auf der Sprache der TYPO3-Website.

Einrichtung im Backend

Konfigurieren Sie die Einstellungen für die Datenschutzebene

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 greifen automatisch auf Standardübersetzungen zurück.

Mediendatensätze erstellen

YouTube/Vimeo:

1. VidPly-Medien-Datensatz erstellen
2. Wählen Sie den Medientyp YouTube oder Vimeo
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-Medien-Datensatz erstellen
2. Wähle den SoundCloud-Medientyp aus
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

UX

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

Technisch

• Lazy-Iframe-Erstellung
• Dienstspezifische Einbettungs-URLs
• Mehrsprachige Unterstützung (EN/DE + Backend-Übersetzungen)
• Database-gesteuerte 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 von der eigenständigen VidPly-Anwendung verwendet SoundCloudRenderer. In mpc-vidply der Datenschutz-Layer bindet diesen Iframe direkt ein (das SoundCloud-Widget bringt seine eigenen Steuerelemente für Wiedergabe, Pause und Fortschrittsanzeige mit). Bei der Verwendung der VidPly-Standalone-Version SoundCloudRenderer wird derselbe Iframe eingebunden, aber zusätzlich über die SoundCloud-Widget-API mit ihm kommuniziert, sodass die Wiedergabe über die eigenen Steuerelemente von VidPly (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 - „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.

Benutzerdefiniertes 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 Partials/VidPly/PrivacyLayer.html so, dass nach der Zustimmung 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 (im Standardfall mpc-vidply ist dies nicht der Fall, da externe Dienste den Iframe-Pfad der Datenschutzschicht verwenden). Dies erreichen Sie durch eine Erweiterung VidPlyProcessor , um $needsVidPlay = true , wenn SoundCloud vorhanden ist.
3. Das gebündelte SoundCloudRenderer (wird automatisch für jede URL erkannt, die soundcloud.com) übernimmt und leitet die Wiedergabe-/Pause-/Such-/Lautstärke-/Fortschrittsfunktionen von VidPly über die SoundCloud-Widget-API weiter.

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

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