動画ブロックのプレイバックコントロールを有効にした時にある「ダウンロード」リンクを無効にする方法

公開日:2024(令和6)年4月27日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



久しぶりに「動画」ブロックを挿入してみて気づいたのが、プレイバックコントロールを有効化した際一番右に表示される三点リーダー(点が縦に3つ並んだボタン)をクリックした時に出てくるダウンロードボタン。

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

「あれ?ダウンロードできるようになってる?」とちょっとびっくりしました。

いやいやダウンロードさせちゃいかんでしょ!ということで以下のようにダウンロードボタンを非表示にする方法を2つ紹介します。

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

この方法は公式フォーラムの「Disable Video Download」にあった、videoタグに「controlsList=”nodownload”」を追加することで無効にできるというヒントを基に2種類の方法をコード化したものです(ちなみにフォーラムにあるCSSの方法は私の環境では無効になりませんでした)。

このサイトでも現在導入していて、以下のページで動画ブロックを埋め込んでいるので、確認してみてくださいね。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

プレイバックコントロールからダウンロードを無効にする方法

jQueryを使用する、PHPを使用するのいずれかで無効にできます。サイトの環境に合わせて選択してください。

どちらもvideoタグに対して「controlsList=”nodownload”」を追記する(挿入する)というもので、どちらを使っても特に動作の違いや処理速度に違いはないと思います。

ただし、videoタグで出力されるものすべてに影響が及びますので、他のブロックなどを使用する際にはよく確認するようにしてください(動画ブロックで処理されるかのテストのみしかしていません)

jQueryを使う方法

テーマや子テーマでjQueryを読み込むような機能がある場合には以下の簡単なコードで実装できます。

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

PHPを使う方法

有効化しているテーマのfunctions.phpへ以下を追加することで実装できます。

function pwcn_disable_download_to_video_block($content) {
//videoタグにcontrolsList="nodownload"を追加
	$content = preg_replace('/<video(.*?)>/', '<video$1 controlsList="nodownload">', $content);
    
	return $content;
}
add_filter('the_content', 'pwcn_disable_download_to_video_block');
, , ,



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Block Theme Customize | Personal WP Customization Notes (PWCN)
ブロックテーマでサイトの背景画像を設定する5つの方法