How to disable the “Download” link when enabling playback controls for a video block

PubDate:

/ ModDate:

WordPressのカスタマイズ方法についての画像

<Description based on the Act on Premiums and Representations> The content on this site may include product promotions.



When I inserted the “Video” block for the first time in a while, I noticed that when I activated the playback control and clicked on the three-dot leader (the button with three vertical dots) displayed on the far right, Download button that comes.

動画ブロックを挿入した際フロントエンドで表示されるダウンロードボタン

I was a little surprised and thought, “Huh? Is it available for download?”

No, I can’t let you download it! So, I will introduce two ways to hide the download button as follows.

動画ブロックでダウンロードボタンを無効にした際の画像

This method is based on a hint from the official forum “Disable Video Download” that it can be disabled by adding “controlsList=”nodownload”” to the video tag (by the way, two methods are coded) The CSS methods on the forums did not disable it in my environment).

We are currently implementing on this site, and we have embedded video blocks on the following pages, so please check it out.

How to disable downloads from playback controls

You can disable it using either jQuery or PHP. Please select according to your site environment.

Both involve adding (inserting) “controlsList=”nodownload”” to the video tag, and I don’t think there is any difference in operation or processing speed no matter which one you use.

However, everything output with the video tag will be affected, so please check carefully when using other blocks (I have only tested whether it is processed with the video block)

How to use jQuery

If your theme or child theme has a function that loads jQuery, you can implement it with the simple code below.

jQuery(document).ready(function($) {
  $('video').attr('controlsList', 'nodownload');
});

How to use PHP

This can be implemented by adding the following to functions.php of the enabled theme.

function pwcn_disable_download_to_video_block($content) {
//Add controlsList="nodownload" to video tag
	$content = preg_replace('/<video(.*?)>/', '<video$1 controlsList="nodownload">', $content);
    
	return $content;
}
add_filter('the_content', 'pwcn_disable_download_to_video_block');

This page is an English translation of the Japanese page. The information on the Japanese page may be more accurate because we maintain the Japanese page as the basis and not all content matches.
You can view the Japanese page by clicking the “View Japanese Page” button on the top right of the page, so please take a look.

If you found the content posted on this page or the reference code introduced helpful, please leave a comment in the comment section at the end of the page, or spread the word on SNS etc.

The methods and codes posted on this page have been confirmed to work in my environment as of the last update date. Please note that in principle, we will not respond even if we receive information about malfunctions or detailed customization methods in the comments section.

Until the end Thank you for reading.

The copyright and ownership of all content published on this page, including texts, images, and codes, belongs to this site, and reproduction is strictly prohibited.