Makertube

Das Gadget MakerTube bindet Videos von MakerTube (einer freien, PeerTube-basierten Video-Plattform für die Maker-Szene) 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 ein Video also nicht einfach mit <iframe src="…"> in eine Seite schreiben. 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 genau dasselbe Muster wie beim Bahnsteiganzeiger – nur mit MakerTube als Quelle.

Video einbinden

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

<div class="makertube-embed" data-video="VIDEO-ID"></div>

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

Attribute

Attribut	Pflicht?	Bedeutung	Standard
`class="makertube-embed"`	ja	Erkennungsmerkmal. Nur `<div>` mit genau dieser Klasse werden vom Gadget bearbeitet.	–
`data-video`	ja	Die Video-ID von MakerTube (siehe unten). Fehlt sie, tut das Gadget nichts.	–
`data-width`	nein	Breite des Players in Pixeln.	560
`data-height`	nein	Höhe des Players in Pixeln.	315

Beispiele

Standardgröße (560 × 315):

<div class="makertube-embed" data-video="mVt8xY2abcd1234"></div>

Größerer Player mit eigener Breite und Höhe:

<div class="makertube-embed" data-video="mVt8xY2abcd1234" data-width="800" data-height="450"></div>

Mehrere Videos auf einer Seite sind problemlos möglich – einfach mehrere solcher <div> untereinander setzen. (mVt8xY2abcd1234 ist nur ein Platzhalter; deine echte ID sieht anders aus.)

Die Video-ID finden

Die ID ist der Code, den MakerTube selbst im Einbett-Link verwendet. Am sichersten so:

Das Video auf makertube.net öffnen.
Auf Teilen klicken und den Reiter Einbetten wählen.
Im angezeigten Einbett-Code steht eine Adresse der Form https://makertube.net/videos/embed/ID.
Genau den Teil hinter /embed/ kopieren – das ist die data-video.

Meist findet man dieselbe ID auch am Ende der normalen Video-Adresse (z. B. makertube.net/w/ID). Wenn ein Video nicht erscheint, immer über „Teilen → Einbetten" gegenprüfen, welche ID MakerTube dort wirklich nennt.

Wie das Gadget funktioniert

Der Ablauf ist bewusst schlicht:

Sobald die Seite geladen ist, sucht das Gadget alle <div class="makertube-embed">.
Für jeden Container liest es data-video. Ist keine ID gesetzt, wird der Container übersprungen.
Es erzeugt ein <iframe> mit der Adresse https://makertube.net/videos/embed/<ID>, setzt Breite und Höhe aus data-width/data-height (bzw. 560 × 315 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.

Seite MediaWiki:Gadget-MakerTube.js anlegen und den kompletten JavaScript-Code (siehe unten) hineinkopieren.
In MediaWiki:Gadgets-definition diese Zeile ergänzen:

* MakerTube[ResourceLoader|default]|MakerTube.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:

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

Der komplette Gadget-Code

Inhalt von MediaWiki:Gadget-MakerTube.js:

$( function () {
    $( '.makertube-embed' ).each( function () {
        var id = $( this ).data( 'video' );
        if ( !id ) { return; }
        var iframe = document.createElement( 'iframe' );
        iframe.src = 'https://makertube.net/videos/embed/' + id;
        iframe.width = $( this ).data( 'width' ) || 560;
        iframe.height = $( this ).data( 'height' ) || 315;
        iframe.frameBorder = '0';
        iframe.allowFullscreen = true;
        this.appendChild( iframe );
    } );
} );

Für eine andere PeerTube-Instanz

MakerTube ist eine PeerTube-Seite. Möchte man dasselbe für eine andere PeerTube-Instanz (z. B. das eigene PeerTube), nur die Domain in der iframe.src-Zeile austauschen:

iframe.src = 'https://DEINE-INSTANZ.example/videos/embed/' + id;

Der Einbett-Pfad /videos/embed/<ID> ist bei PeerTube überall gleich.

Grenzen und Wartung

Feste Größe. Breite und Höhe sind Pixelwerte und passen sich nicht automatisch an schmale Bildschirme an. Auf Handys kann ein 800 px breiter Player über den Rand hinausragen. Im Zweifel bei den Standardwerten (560 × 315) bleiben oder moderate Werte wählen.
Nur MakerTube. Die Domain makertube.net steht fest im Code. Andere Instanzen erfordern die Anpassung oben.
Abhängig von MakerTube. Ändert MakerTube das Einbett-Format /videos/embed/… oder wird die Seite abgeschaltet, funktionieren die Player nicht mehr. Dann muss die iframe.src-Zeile angepasst werden.
Vollbild. Der Player erlaubt Vollbild. Das reicht für ein PeerTube-Embed; weitere iframe-Rechte (z. B. Autoplay) werden bewusst nicht gesetzt.
Keine <iframe> von Hand. Aus dem eingangs genannten Grund nie versuchen, das iframe direkt in den Seitentext zu schreiben – MediaWiki filtert es 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: makertube-embed (Bindestrich, klein)?
Ist data-video gesetzt und enthält es die richtige ID (über „Teilen → Einbetten" auf MakerTube gegenprüfen)?
Lädt der Einbett-Link direkt im Browser? Adresse https://makertube.net/videos/embed/<ID> testweise selbst öffnen.
Seite mit Strg + F5 bzw. Strg + Umschalt + R neu laden (Browser-Cache umgehen).