Letzte Woche wurde ich im Hilfe bei einem Website-Projekt gebeten. Auf der Seite gab es einige Einbindungen von Audio-Dateien in die Seite. Dieses tolle Feature von WordPress ermöglicht es seht einfach Mediendateien in die Seite einzubetten. Aber manche mögen es nicht, dass man die Dateien in einigen Browsern dann so einfach runterladen kann.

Der „Herunterladen“-Button in Chrome

Im Chrome browser ist es noch einfacher als in anderen Browsern. Dort wird standardmäßig bei jedem Audio und Video Tag ein „Herunterladen“-Button in den Optionen (den drei Punkten neben den Steuerelementen) angeboten. In diesem speziellen Projekt gab es nun den Wunsch diesen Button zu entfernen, um es zumindest etwas schwerer zu machen, die Dateien herunterzuladen und niemanden dazu zu „ermutigen“.

Ausblenden des Buttons mit dem „controlList“ Attribut

Chrome ist der einzige Browser (der mir bekannt ist), der einen solchen Button hat, aber glücklicherweise gibt es auch einen einfach Weg, ihn zu deaktivieren: das controlList Attribut. Das Attribute kann unterschiedliche/mehrere Werte haben, und einer davon ist nodownload, der den Button ausblendet.

Nun könnte man auf die Idee kommen, dieses Attribut einfach über den „Als HTML bearbeiten“ Modus hinzuzufügen, aber sobald man dann über „Visuell bearbeiten“ wieder zurück wechselt ist der Block defekt und man kann nur auswählen den Block zu reparieren (was das Attribut wieder entfernt), oder aber den Block in HTML zu konvertieren.

Einen Feature-Request für Gutenberg erstellen

Da dieses Problem sicher nicht neu ist habe ich mich auf die Suche nach existierenden Tickets gemacht und zwei gefunden. Im ersten wurde darum gebeten einen Schalter einzubauen, der den Button ausblendet. Dieses Ticket verwies auf ein zweites Ticket, in dem generell darüber diskutiert wurde, den Button zu deaktivieren, ebenfalls mit einem Schalter.

In diesem zweiten Ticket wurden gute Argumente aufgeführt, wie ein solcher Schalter nicht gut wäre. Da nur der Chrome Browser diesen Button anzeigt würde auch nur hier der Schalter „funktioniere“. Er würde aber auch hier nicht wirklich funktionieren. Denn auch das Attribut verhindert nicht den Download.

Wenn Audio oder Video-Dateien aus der Mediathek über einen Audio oder Video HTML Tag eingebunden werden, dann können sie auch runtergeladen werden. Sie werden im Grunde auch automatisch „runtergeladen“, sobald sie abgespielt werden.

Den Button still mit einem Plugin entfernen

Wenn ihr den Download also nicht wirklich verhindern könnte, aber wenigsten den Button entfernen möchtet, dann könnt ihr einen Filter verwenden, der beim Rendern des Block das Attribut hinzufügt. Das würde in der einfachsten Form wie folgt aussehen:

function hide_download_buttons_on_embeds_render_block( $block_content, $block ) {
	if ( 'core/audio' === $block['blockName'] ) {
		$block_content = str_replace(
			'<audio ',
			'<audio controlsList="nodownload" ',
			$block_content
		);
	}
	if ( 'core/video' === $block['blockName'] ) {
		$block_content = str_replace(
			'<video ',
			'<video controlsList="nodownload" ',
			$block_content
		);
	}

	return $block_content;
}
add_filter( 'render_block', 'hide_download_buttons_on_embeds_render_block', 10, 2 );

Ihr müsst eventuell etwas mehr Code schreiben, falls der HTML Tag in eurer WordPress-Installation bereits das Attribut mit anderen Werten hat.

Fazit

Obwohl es nicht möglich ist den Download von Audio und Video-Dateien aus der Mediathek in dieser Weise zu verhindern, könnte es für euch vielleicht dennoch interessant sein.

Wenn ihr hingegeben explizit wollt, dass Downloads möglich sind – beispielsweise für eine Episode eures Podcasts – dann solltet ihr stattdessen aktiv einen Download-Button über den „Datei“ Block hinzufügen. Damit habt ihr nicht nur einen Button, der konsistent in allen Browsern gleich aussieht, es macht den Download auch einfacher, intuitiver und barrierefreier möglich.

Wie immer findet ihr den Code zu diesem Blogbeitrag als GIST, wo ihr es auch als ZIP-Datei runterladen und dann als Plugin installieren könnt.