Admin: /* Warum ein Gadget? */

2026-08-22T15:08:57Z

Warum ein Gadget?

← Nächstältere Version		Version vom 22. August 2026, 17:08 Uhr
Zeile 5:		Zeile 5:
	== Warum ein Gadget? ==		== Warum ein Gadget? ==

	MediaWiki entfernt rohe <code><iframe></code>-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 <code><div></code> mit ein paar <code>data-</code>-Angaben, und ein kleines JavaScript baut daraus zur Laufzeit das iframe. Das ist dasselbe Muster wie bei [[~~Hilfe:MakerTube\|MakerTube~~]] und beim [[~~Hilfe:Bahnsteiganzeiger\|~~Bahnsteiganzeiger]] – nur mit media.ccc.de als Quelle.		MediaWiki entfernt rohe <code><iframe></code>-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 <code><div></code> mit ein paar <code>data-</code>-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 ==		== Video einbinden ==

Admin: Die Seite wurde neu angelegt: „{{Kurzbeschreibung|Bettet Vorträge von media.ccc.de per einfachem
-Container in Wiki-Seiten ein.}} Das Gadget '''CCC''' bindet Videos von [https://media.ccc.de 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 eigent…“

2026-08-22T15:06:34Z

Die Seite wurde neu angelegt: „{{Kurzbeschreibung|Bettet Vorträge von media.ccc.de per einfachem <div>-Container in Wiki-Seiten ein.}} Das Gadget '''CCC''' bindet Videos von [https://media.ccc.de 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-<code><div></code>; das Gadget baut daraus den eigent…“

Neue Seite

{{Kurzbeschreibung|Bettet Vorträge von media.ccc.de per einfachem <div>-Container in Wiki-Seiten ein.}}

Das Gadget '''CCC''' bindet Videos von [https://media.ccc.de 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-<code><div></code>; das Gadget baut daraus den eigentlichen Video-Player.

== Warum ein Gadget? ==

MediaWiki entfernt rohe <code><iframe></code>-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 <code><div></code> mit ein paar <code>data-</code>-Angaben, und ein kleines JavaScript baut daraus zur Laufzeit das iframe. Das ist dasselbe Muster wie bei [[Hilfe:MakerTube|MakerTube]] und beim [[Hilfe:Bahnsteiganzeiger|Bahnsteiganzeiger]] – nur mit media.ccc.de als Quelle.

== Video einbinden ==

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

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

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

=== Attribute ===

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

=== Beispiele ===

Standardgröße (1024 × 576):

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

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

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

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

== Den Talk-Slug finden ==

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

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

Also:

# Den Vortrag auf [https://media.ccc.de media.ccc.de] öffnen.
# Aus der Adresszeile alles hinter <code>/v/</code> kopieren.
# Diesen Text als <code>data-video</code> 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 <code>https://media.ccc.de/v/<SLUG>/oembed</code> – der Teil zwischen <code>/v/</code> und <code>/oembed</code> ist genau der gesuchte Slug.

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

== Wie das Gadget funktioniert ==

Der Ablauf ist bewusst schlicht:

# Sobald die Seite geladen ist, sucht das Gadget alle <code><div class="ccc-embed"></code>.
# Für jeden Container liest es <code>data-video</code>. Ist kein Slug gesetzt, wird der Container übersprungen.
# Es erzeugt ein <code><iframe></code> mit der Adresse <code>https://media.ccc.de/v/<SLUG>/oembed</code>, setzt Breite und Höhe aus <code>data-width</code>/<code>data-height</code> (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 [https://www.mediawiki.org/wiki/Extension:Gadgets Extension:Gadgets] ist installiert und aktiv. Eine weitere Erweiterung ist '''nicht''' nötig.

# Seite <code>MediaWiki:Gadget-CCC.js</code> anlegen und den kompletten JavaScript-Code (siehe unten) hineinkopieren.
# In <code>MediaWiki:Gadgets-definition</code> diese Zeile ergänzen:

<pre>
* CCC[ResourceLoader|default]|CCC.js
</pre>

<code>default</code> 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 <code>$</code> undefiniert ist, die Zeile stattdessen mit jQuery-Abhängigkeit schreiben:

<pre>
* CCC[ResourceLoader|default|dependencies=jquery]|CCC.js
</pre>

=== Der komplette Gadget-Code ===

Inhalt von <code>MediaWiki:Gadget-CCC.js</code>:

<pre>
$( 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 );
} );
} );
</pre>

=== Unterschied zum MakerTube-Gadget ===

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

{| class="wikitable"
! !! MakerTube !! media.ccc.de
|-
| CSS-Klasse || <code>makertube-embed</code> || <code>ccc-embed</code>
|-
| Adresse || <code>…/videos/embed/<ID></code> – ID '''am Ende''' || <code>…/v/<SLUG>/oembed</code> – 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 <code>iframe.src</code>-Zeile noch ein <code>+ '/oembed'</code> 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 <code>data-width="640" data-height="360"</code> setzen.
* '''Nur media.ccc.de.''' Die Domain steht fest im Code.
* '''Abhängig von media.ccc.de.''' Ändert die Mediathek das Einbett-Format <code>/v/…/oembed</code>, funktionieren die Player nicht mehr. Dann muss die <code>iframe.src</code>-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 <code><iframe></code> 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 <code><div></code>-Container verwenden.

== Fehlersuche ==

Erscheint kein Video, der Reihe nach prüfen:

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

[[Kategorie:Hilfe]]

CCC - Versionsgeschichte

Admin: /* Warum ein Gadget? */