MediaWiki:Gadget-CCC.js

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

/**
 * Gadget-CCC.js
 * ============================================================================
 * Bettet Vorträge von media.ccc.de ein.
 *
 * KEINE ZWEI-KLICK-SPERRE: media.ccc.de setzt keine Cookies, speichert nichts
 * im Browser und betreibt weder Werbung noch Reichweitenmessung. Damit greift
 * die Einwilligungspflicht des §165 TKG nicht, und für die IP-Übertragung
 * beim Abruf trägt das berechtigte Interesse. Anders bei fahrplan.oebb.at und
 * makertube.net – die haben ihre Vorschaubox.
 *
 * EINBINDUNG AUF EINER SEITE
 *   <div class="ccc-embed" data-video="38c3-12345-titel-des-vortrags"></div>
 *
 * data-Attribute:
 *   data-video   Pflicht. Der Teil der Adresse hinter media.ccc.de/v/.
 *   data-width   Breite (Standard 640; "100%" ist erlaubt).
 *   data-height  Höhe (Standard 360).
 * ============================================================================
 */
$( 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' ) || 640;
		iframe.height = $( this ).data( 'height' ) || 360;
		iframe.frameBorder = '0';
		iframe.allowFullscreen = true;
		iframe.title = 'Vortragsaufzeichnung';
		// Verhindert waagrechtes Scrollen der ganzen Seite auf Telefonen.
		iframe.style.maxWidth = '100%';
		// Erst laden, wenn der Player in Sichtweite kommt.
		iframe.loading = 'lazy';
		this.appendChild( iframe );

		// Rückfallebene: wer iframes blockiert (uBlock, NoScript, Textbrowser),
		// sähe sonst nur ein weißes Loch ohne Hinweis auf den Vortrag.
		var fuss = document.createElement( 'div' );
		fuss.style.cssText = 'font-size:85%;color:#54595d;margin-top:0.4em';
		var link = document.createElement( 'a' );
		link.href = 'https://media.ccc.de/v/' + id;
		link.target = '_blank';
		link.rel = 'noopener';
		link.textContent = 'Vortrag bei media.ccc.de öffnen';
		fuss.appendChild( link );
		this.appendChild( fuss );
	} );
} );