schachbulle / contao-tiktok-bundle

1.1.0 2026-10-13 14:17 UTC

Requires

• php: ^7.4 || ^8.0
• contao/core-bundle: ^4.13 || ^5.0
• symfony/http-client: ^5.4 || ^6.0 || ^7.0

Requires (Dev)

• contao/manager-plugin: ^2.0
• phpunit/phpunit: ^9.6 || ^10.5 || ^11.0

Conflicts

• contao/core: *
• contao/manager-plugin: <2.0 || >=3.0

LGPL-3.0-or-later

• Frank Hoppe

• video
• embed
• social media
• contao
• TikTok
• inhaltselement
• einbetten

Published on Packagist.org on 2026-10-13 14:17 UTC

README

Inhaltselement für Contao 4.13 und Contao 5, das ein einzelnes TikTok-Video anzeigt. Es genügt der Link zum Video. Ein API-Schlüssel oder eine Registrierung bei TikTok ist nicht nötig.

Voraussetzungen

• Contao 4.13 oder Contao 5 (geprüft mit 4.13.58 und 5.7.7)
• PHP 7.4 oder neuer (geprüft mit PHP 8.4.24)

Installation

composer require schachbulle/contao-tiktok-bundle

Danach die Datenbank aktualisieren (Contao Manager oder contao:migrate). Das Bundle ergänzt in tl_content die Felder tiktokUrl und tiktokOptions.

Verwendung

Das Inhaltselement TikTok steht in der Typauswahl in der Gruppe „Medienelemente“ neben YouTube und Vimeo.

Feld	Bedeutung
Link zum Video	Link der Form https://www.tiktok.com/@konto/video/7123…, ein Kurzlink (https://vm.tiktok.com/…) oder die bloße Videonummer
Player-Optionen	Automatisch abspielen, Endlosschleife, Beschreibung einblenden, Angaben zur Musik einblenden, am Ende keine weiteren Videos vorschlagen

Ein Kurzlink enthält keine Videonummer. Er wird beim Speichern einmalig über die oEmbed-Schnittstelle von TikTok aufgelöst und durch den vollständigen Link ersetzt. Im Frontend findet danach kein Aufruf vom Server zu TikTok mehr statt.

Abgewiesen werden beim Speichern fremde Adressen sowie Links, die kein einzelnes Video bezeichnen (Profile, Foto-Beiträge).

Ausgabe

Das Video erscheint sofort mit dem Seitenaufbau im Einbettungsplayer von TikTok (https://www.tiktok.com/player/v1/<Videonummer>), ohne vorgeschalteten Klick:

<div class="ce_tiktok block">
  <div class="tiktok_container">
    <iframe src="https://www.tiktok.com/player/v1/6718335390845095173" title="TikTok-Video" …></iframe>
  </div>
</div>

Im Backend zeigt die Elementliste statt des Players nur den eingetragenen Link.

Größe und Abstand anpassen

Die mitgelieferte Stildatei bundles/contaotiktok/tiktok.css gibt dem Player das Hochformat 9:16 und höchstens 325 Pixel Breite. Unter dem Element bleiben 20 Pixel Abstand zum nächsten Element. Beides lässt sich im eigenen Stylesheet über CSS-Variablen ändern:

.ce_tiktok {
    --tiktok-breite: 420px;
    --tiktok-abstand: 40px;
}

Variable	Vorgabe	Bedeutung
--tiktok-breite	325px	Größte Breite des Players; die Höhe folgt aus dem Seitenverhältnis
--tiktok-abstand	20px	Außenabstand unter dem Element (margin-bottom); 0 schaltet ihn ab

Setzt das eigene Stylesheet für .ce_tiktok selbst ein margin-bottom, gilt dieser Wert — die Stildatei des Bundles wird vor den Stylesheets des Seitenlayouts geladen.

Template

Das Template heißt ce_tiktok und lässt sich wie üblich im Ordner templates überschreiben oder am Element durch ein eigenes ce_tiktok_… ersetzen. Es bekommt playerUrl (für HTML maskiert), videoId und frameTitle.

Datenschutz

Der Browser des Besuchers lädt den Player unmittelbar von tiktok.com; dabei erfährt TikTok mindestens die IP-Adresse und die aufrufende Seite. Der Player blendet im Geltungsbereich der DSGVO seinen eigenen Cookie-Hinweis ein. Eine vorgeschaltete Einwilligung („Zwei-Klick-Lösung“) bringt das Bundle bewusst nicht mit. Wer sie braucht, hängt sie über ein eigenes Template oder ein Consent-Werkzeug davor.

Entwicklung

Unit-Tests (ohne Contao-Installation und ohne Netzwerk):

composer install --no-plugins
vendor/bin/phpunit

Prüfstand gegen eine Contao-Installation, in die das Bundle als Pfad-Paket eingebunden ist (Container-Cache vorher leeren):

php tests/pruefstand.php /pfad/zur/contao-installation

Aufbau

Datei	Aufgabe
src/Tiktok/VideoLink.php	Liest die Videonummer aus Links, baut die Player-Adresse; ohne Contao, ohne Netzwerk
src/EventListener/VideoLinkListener.php	save_callback an tl_content.tiktokUrl: prüft den Link, löst Kurzlinks über oEmbed auf
src/ContentElements/Tiktok.php	Das Inhaltselement (klassisch über $GLOBALS['TL_CTE'], läuft so unter 4.13 und 5)
src/Resources/contao/templates/ce_tiktok.html5	Frontend-Template
src/Resources/public/tiktok.css	Seitenverhältnis und Breite des Players, Abstand zum nächsten Element

Lizenz

LGPL-3.0-or-later