Admin: Die Seite wurde neu angelegt: „Hauptseite > Schwarzatal.org {{Kurzbeschreibung|Bettet Videos von MakerTube per einfachem
-Container in Wiki-Seiten ein.}} Das Gadget '''MakerTube''' bindet Videos von [https://makertube.net 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 Vi…“

2026-07-10T06:32:01Z

Die Seite wurde neu angelegt: „Hauptseite > Schwarzatal.org {{Kurzbeschreibung|Bettet Videos von MakerTube per einfachem <div>-Container in Wiki-Seiten ein.}} Das Gadget '''MakerTube''' bindet Videos von [https://makertube.net 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-<code><div></code>; das Gadget baut daraus den eigentlichen Vi…“

Neue Seite

[[Hauptseite]] > [[Hauptseite#Schwarzatal.org|Schwarzatal.org]]

{{Kurzbeschreibung|Bettet Videos von MakerTube per einfachem <div>-Container in Wiki-Seiten ein.}}

Das Gadget '''MakerTube''' bindet Videos von [https://makertube.net 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-<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 ein Video also '''nicht''' einfach mit <code><iframe src="…"></code> in eine Seite schreiben. 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 genau dasselbe Muster wie beim [[Hilfe:Bahnsteiganzeiger|Bahnsteiganzeiger]] – nur mit MakerTube als Quelle.

== Video einbinden ==

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

<pre>
<div class="makertube-embed" data-video="VIDEO-ID"></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="makertube-embed"</code> || '''ja''' || Erkennungsmerkmal. Nur <code><div></code> mit genau dieser Klasse werden vom Gadget bearbeitet. || –
|-
| <code>data-video</code> || '''ja''' || Die Video-ID von MakerTube (siehe unten). Fehlt sie, tut das Gadget nichts. || –
|-
| <code>data-width</code> || nein || Breite des Players in Pixeln. || 560
|-
| <code>data-height</code> || nein || Höhe des Players in Pixeln. || 315
|}

=== Beispiele ===

Standardgröße (560 × 315):

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

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

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

Mehrere Videos auf einer Seite sind problemlos möglich – einfach mehrere solcher <code><div></code> untereinander setzen. (<code>mVt8xY2abcd1234</code> 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 [https://makertube.net makertube.net] öffnen.
# Auf '''Teilen''' klicken und den Reiter '''Einbetten''' wählen.
# Im angezeigten Einbett-Code steht eine Adresse der Form <code>https://makertube.net/videos/embed/<b>ID</b></code>.
# Genau den Teil hinter <code>/embed/</code> kopieren – das ist die <code>data-video</code>.

Meist findet man dieselbe ID auch am Ende der normalen Video-Adresse (z. B. <code>makertube.net/w/<b>ID</b></code>). 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 <code><div class="makertube-embed"></code>.
# Für jeden Container liest es <code>data-video</code>. Ist keine ID gesetzt, wird der Container übersprungen.
# Es erzeugt ein <code><iframe></code> mit der Adresse <code>https://makertube.net/videos/embed/<ID></code>, setzt Breite und Höhe aus <code>data-width</code>/<code>data-height</code> (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 [https://www.mediawiki.org/wiki/Extension:Gadgets Extension:Gadgets] ist installiert und aktiv. Eine weitere Erweiterung ist '''nicht''' nötig.

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

<pre>
* MakerTube[ResourceLoader|default]|MakerTube.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>
* MakerTube[ResourceLoader|default|dependencies=jquery]|MakerTube.js
</pre>

=== Der komplette Gadget-Code ===

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

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

=== 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 <code>iframe.src</code>-Zeile austauschen:

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

Der Einbett-Pfad <code>/videos/embed/<ID></code> 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 <code>makertube.net</code> steht fest im Code. Andere Instanzen erfordern die Anpassung oben.
* '''Abhängig von MakerTube.''' Ändert MakerTube das Einbett-Format <code>/videos/embed/…</code> oder wird die Seite abgeschaltet, funktionieren die Player nicht mehr. Dann muss die <code>iframe.src</code>-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 <code><iframe></code> von Hand.''' Aus dem eingangs genannten Grund nie versuchen, das iframe direkt in den Seitentext zu schreiben – MediaWiki filtert es 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>makertube-embed</code> (Bindestrich, klein)?
* Ist <code>data-video</code> gesetzt und enthält es die richtige ID (über „Teilen → Einbetten" auf MakerTube gegenprüfen)?
* Lädt der Einbett-Link direkt im Browser? Adresse <code>https://makertube.net/videos/embed/<ID></code> testweise selbst öffnen.
* Seite mit '''Strg + F5''' bzw. '''Strg + Umschalt + R''' neu laden (Browser-Cache umgehen).

[[Kategorie:Hilfe]]

Makertube - Versionsgeschichte