Hide the download button for audio and video blocks

Last week I was asked for help on a website project. In this project, the website embeds some audio files into the page. This is a great feature of WordPress making it so easy to embed media files. But some people dislike, that on some browsers it’s do easy to download those files.

The “download” button in Chrome

In the Chrome browsers, it’s simpler than in any other browsers. By default, any audio and video tag would add a “download” button to the options (the three dots, next to the controls). In this particular project, the button should be removed, to make it at least a little harder to download a file and not “encouraging” anyone to do so.

Hiding the button using the “controlList” attribute

Chrome is the only browser with such a button (I know of) and forunately it also has an easy way to disable it: the controlList attribute. This attribute can have different/multiple values and one of them is the nodownload value.

You may now this, that you can simply add this attribute manually to the block using the “Edit as HTML” view. But as soon as you switch back to the “Edit visually” view, the block will be defect and you can only choose to either recover it (which removes the attribute) or convert it to HTML.

Adding for a feature request in Gutenberg

As this issue was probably not new, I searched for existing tickets and found two. The first one was asking to add a toggle to show the download button. This one referred to a second ticket about the general idea of disabling the download button, also by introducing a toggle.

In this second ticket some good arguments were made against such a toggle. As only Chrome has this button, such a toggle would only “work” in Chrome. And it would not even really work. Because even the attribute will not prevent downloads.

If a audio or video file is embedded with an audio or video HTML tag using a file from the media library, it can be downloaded. It will actually be “downloaded” automatically, once the media is played.

Silently removing the button with a plugin

So even though you cannot prevent the download, you might still want to hide the button in this case you can filter the block rendering and add the attribute there. In the simplest form, it will look like this:

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 );

You might have to write a bit more code, if the HTML tags in your WordPress installation already uses some other attribute values.

Conclusion

While it’s not possible to prevent downloads of audio and video files from the media library in such a way, it might still be something you want to add to your page.

If you do want to allow downloads – let’s say for episodes of a podcast – it’s much better to actively add a download button using the “File” block. This will not only present a consistent button in browser, it will also make it a lot easier, obvious and accessible to download the media file.

As always, the solution from this blog post can be found as a GIST where you can download the solution as a ZIP file and install it as a plugin.

Posted by

Bernhard is a full time web developer who likes to write WordPress plugins in his free time and is an active member of the WP Meetups in Berlin and Potsdam.

7 comments » Write a comment

  1. Hi there
    This does not work for me.
    I use Unite Gallery Lite and the download button is still there and works.

    • My blog post covers the core blocks. If you use a plugin that uses it’s own blocks (or no blocks at all) this will probably not work and you have to solve it differently.

      • I’m glad you like this tip. But this is not something I would offer as a plugin in the directory. As explained in the blog post, this issue/fix is only working in Chrome, and it would not prevent anyone from being able to download the video with a right click.

  2. Hi thanks so much! I found this to add this to the theme’s post/page’s “Body Scripts” section. Added it to a child theme. Plugin is much easier. Could I add this code somehow to this plugin? How?

    (function($){
      $(document).on('contextmenu', 'audio', function() {
          return false;
      })
    })(jQuery);
    

    This is where it came from: https://wordpress.org/support/topic/remove-wordpress-audio-player-download-button-added-by-chrome/

    • Hi Amy,

      you can add JavaScript code in many different ways. One way would be to use the wp_footer hook: https://developer.wordpress.org/reference/functions/wp_add_inline_script/#comment-5828

      But I would recommend against it. Just as with my solution, this would not prevent potential downloads, it just makes them harder.

      It could also hurt accessibility and usability of your site for some users!

      But if you really need to do it, you can even do it without jQuery:

      document.querySelectorAll('audio').forEach(audio => audio.addEventListener('contextmenu', e => e.preventDefault()));
      

Leave a Reply

Your email address will not be published. Required fields are marked *