Schwarzatal.org

CCC

Vorlage:Kurzbeschreibung

Das Gadget CCC bindet Videos von media.ccc.de – der Mediathek des Chaos Computer Clubs mit den Aufzeichnungen von Congress, Camp, FrOSCon, Hackover und vielen weiteren Veranstaltungen – direkt in Wiki-Seiten ein. Auf der Seite steht nur ein einfacher Container-<div>; das Gadget baut daraus den eigentlichen Video-Player.

Warum ein Gadget?

MediaWiki entfernt rohe <iframe>-Tags aus dem Seitentext (Sicherheitsfilter). Man kann den Einbett-Code, den media.ccc.de anbietet, also nicht einfach in eine Seite kopieren. Das Gadget umgeht das: Auf der Seite steht nur ein harmloser <div> mit ein paar data--Angaben, und ein kleines JavaScript baut daraus zur Laufzeit das iframe. Das ist dasselbe Muster wie bei makertube und beim Bahnsteiganzeiger – nur mit media.ccc.de als Quelle.

Video einbinden

Auf der gewünschten Seite diesen Container einfügen: 

<div class="ccc-embed" data-video="TALK-SLUG"></div>

Mehr braucht es nicht. Beim Öffnen der Seite erscheint an dieser Stelle der Player.

Attribute

Attribut Pflicht? Bedeutung Standard
class="ccc-embed" ja Erkennungsmerkmal. Nur <div> mit genau dieser Klasse werden vom Gadget bearbeitet. –
data-video ja Der Talk-Slug von media.ccc.de (siehe unten). Fehlt er, tut das Gadget nichts. –
data-width nein Breite des Players in Pixeln. 1024
data-height nein Höhe des Players in Pixeln. 576

Beispiele

Standardgröße (1024 × 576): 

<div class="ccc-embed" data-video="froscon2026-3540-curl_mehr_als_http"></div>

Kleinerer Player, z. B. neben Fließtext: 

<div class="ccc-embed" data-video="froscon2026-3540-curl_mehr_als_http" data-width="640" data-height="360"></div>

Mehrere Videos auf einer Seite sind problemlos möglich – einfach mehrere solcher <div> untereinander setzen.

Den Talk-Slug finden

Der Slug ist der sprechende Teil der Video-Adresse hinter /v/. Beispiel: 

https://media.ccc.de/v/froscon2026-3540-curl_mehr_als_http
                       └──────────── das ist der Slug ────────────┘

Also:

  1. Den Vortrag auf media.ccc.de öffnen.
  2. Aus der Adresszeile alles hinter /v/ kopieren.
  3. Diesen Text als data-video eintragen.

Ein Umweg über „Teilen"/„Embed" ist nicht nötig – anders als bei MakerTube ist der Slug direkt in der normalen Adresse sichtbar. Wer trotzdem gegenprüfen möchte: Auf jeder Talk-Seite gibt es unten den Abschnitt Embed, dort steht die Adresse https://media.ccc.de/v/<SLUG>/oembed – der Teil zwischen /v/ und /oembed ist genau der gesuchte Slug.

Sonderzeichen: Manche Slugs enthalten Umlaute oder Sonderzeichen, die der Browser in der Adresszeile in Prozent-Schreibweise anzeigt (z. B. %E2%80%93 für einen Gedankenstrich). Diese Schreibweise unverändert übernehmen – nicht „zurückübersetzen".

Wie das Gadget funktioniert

Der Ablauf ist bewusst schlicht:

  1. Sobald die Seite geladen ist, sucht das Gadget alle <div class="ccc-embed">.
  2. Für jeden Container liest es data-video. Ist kein Slug gesetzt, wird der Container übersprungen.
  3. Es erzeugt ein <iframe> mit der Adresse https://media.ccc.de/v/<SLUG>/oembed, setzt Breite und Höhe aus data-width/data-height (bzw. 1024 × 576 als Standard), erlaubt Vollbild und hängt es in den Container.

Das Gadget ist eigenständig: keine zusätzliche Erweiterung, keine externe Bibliothek außer dem in MediaWiki ohnehin vorhandenen jQuery. Es prüft selbst, ob überhaupt ein passender Container auf der Seite steht, und tut sonst nichts – es kann also gefahrlos überall aktiv sein.

Manuell einrichten (für andere Wikis)

Voraussetzung: Die Erweiterung Extension:Gadgets ist installiert und aktiv. Eine weitere Erweiterung ist nicht nötig.

  1. Seite MediaWiki:Gadget-CCC.js anlegen und den kompletten JavaScript-Code (siehe unten) hineinkopieren.
  2. In MediaWiki:Gadgets-definition diese Zeile ergänzen:
* CCC[ResourceLoader|default]|CCC.js

default bedeutet: für alle aktiv (auch für nicht angemeldete Leser – die sollen die Videos ja sehen). Falls in deinem Wiki jQuery nicht automatisch geladen wird und $ undefiniert ist, die Zeile stattdessen mit jQuery-Abhängigkeit schreiben: 

* CCC[ResourceLoader|default|dependencies=jquery]|CCC.js

Der komplette Gadget-Code

Inhalt von MediaWiki:Gadget-CCC.js: 

$( function () {
    $( '.ccc-embed' ).each( function () {
        var id = $( this ).data( 'video' );
        if ( !id ) { return; }
        var iframe = document.createElement( 'iframe' );
        iframe.src = 'https://media.ccc.de/v/' + id + '/oembed';
        iframe.width = $( this ).data( 'width' ) || 1024;
        iframe.height = $( this ).data( 'height' ) || 576;
        iframe.frameBorder = '0';
        iframe.allowFullscreen = true;
        this.appendChild( iframe );
    } );
} );

Unterschied zum MakerTube-Gadget

Beide Gadgets sind bis auf zwei Stellen identisch. Wer das eine kennt, versteht das andere sofort:

MakerTube media.ccc.de
CSS-Klasse makertube-embed ccc-embed
Adresse …/videos/embed/<ID> – ID am Ende …/v/<SLUG>/oembed – Slug in der Mitte
Kennung kurzer Hash langer, sprechender Slug
Standardgröße 560 × 315 1024 × 576

Der wichtigste Punkt für spätere Änderungen: Bei media.ccc.de wird der Slug zwischen zwei feste Textstücke gesetzt, deshalb steht in der iframe.src-Zeile noch ein + '/oembed' hinter der Variablen.

Grenzen und Wartung

  • Feste Größe. Breite und Höhe sind Pixelwerte und passen sich nicht automatisch an schmale Bildschirme an. Der Standard von 1024 px ist die von media.ccc.de vorgeschlagene Größe, aber breiter als viele Handy-Displays – auf mobilfreundlichen Seiten lieber data-width="640" data-height="360" setzen.
  • Nur media.ccc.de. Die Domain steht fest im Code.
  • Abhängig von media.ccc.de. Ändert die Mediathek das Einbett-Format /v/…/oembed, funktionieren die Player nicht mehr. Dann muss die iframe.src-Zeile angepasst werden.
  • Slugs können sich ändern. Anders als eine Zufalls-ID ist der Slug aus dem Vortragstitel gebildet. Wird ein Talk umbenannt oder neu eingespielt, kann der alte Slug ins Leere laufen. Im Zweifel die Adresse gegenprüfen.
  • Vollbild. Der Player erlaubt Vollbild. Weitere iframe-Rechte (z. B. Autoplay) werden bewusst nicht gesetzt.
  • Keine <iframe> von Hand. Aus dem eingangs genannten Grund nie versuchen, den Embed-Code von media.ccc.de direkt in den Seitentext zu kopieren – MediaWiki filtert ihn weg. Immer den <div>-Container verwenden.

Fehlersuche

Erscheint kein Video, der Reihe nach prüfen:

  • Ist das Gadget aktiv? (Spezial:Version bzw. MediaWiki:Gadgets-definition)
  • Stimmt die Klasse exakt: ccc-embed (Bindestrich, klein)?
  • Ist data-video gesetzt und enthält es den vollständigen Slug – inklusive Veranstaltungs- und Nummernteil (z. B. froscon2026-3540-…), nicht nur den Titel?
  • Wurde versehentlich die ganze Adresse statt nur des Slugs eingetragen? In data-video gehört kein https:// und kein /v/.
  • Lädt der Einbett-Link direkt im Browser? Adresse https://media.ccc.de/v/<SLUG>/oembed testweise selbst öffnen.
  • Seite mit Strg + F5 bzw. Strg + Umschalt + R neu laden (Browser-Cache umgehen).
Abgerufen von „https://schwarzatal.org/index.php?title=CCC&oldid=1176“