Shopifyサイト上に表示している動画をダウンロードさせないようにする方法

公開日:2023.10.29, 更新日:2023.10.29

Shopifyのサイト上に掲載している動画(mp4,YouTubeなど)をユーザーからはダウンロードできないようにしたい・・・

こういったお悩みを解決します。

手順①:動画データのHTMLを改変する

<video controls="controls" controlsList="nodownload">

上記のように、videoタグに「controlsList="nodownload"」という属性を付け加えることで、動画のコントロールパネルにダウンロードボタンを表示させないようにすることができます。

ただし、ダウンロードボタンを隠しても、右クリックメニューから動画をダウンロードすることができるため、この操作も制限できるようにしましょう。

<video controls="controls" controlsList="nodownload" oncontextmenu="return false;">

上記のように、videoタグにさらに「oncontextmenu="return false;"」を追加することで、右クリックメニューを無効化することができます。

この設定により、動画の右クリックメニューからのダウンロードを防ぐことができます。

サンプルコードは以下の通りです。

<video controls controlsList="nodownload" oncontextmenu="return false;">
  <source src="test.mp4" type="video/mp4">
</video>

手順②:ブラウザの右クリックを無効にする

念のため、該当ページでブラウザ全体の右クリックを無効にしておきましょう。

https://gyazo.com/8114bec3d702693cf55112fb72232a34

↑この動画の13秒あたりで、

<style>
 p {
  color: red;
}
</style>

管理画面から動画が掲載されているページのHTML編集から、↑のコードを下記のコードに置き換えた上で保存してください。

<script>
document.addEventListener('contextmenu', function(event) { event.preventDefault(); });
</script>

これで、設定完了です。

まとめ

Shopifyサイト上に表示している動画をダウンロードさせないようにする方法を紹介しました。

この記事が、あなたのEC運営のお役に立てれば幸いです。

※こちらは、Shopifyテーマ開発に詳しくない方向けのHowtoになります

参考: 動画をダウンロードできないようにする

記事を書いた人

福水正太

代表/エンジニア/マーケター/ブロガー 福水正太

国内5番目の個人Shopifyエキスパート / Shopify専門のEC支援企業「株式会社ファイブビット」を設立 / Shopifyストアの新規構築・カスタマイズ・既存ECからShopifyへの移行が得意。