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秒あたりで、
管理画面から動画が掲載されているページのHTML編集から、↑のコードを下記のコードに置き換えた上で保存してください。
これで、設定完了です。
まとめ
Shopifyサイト上に表示している動画をダウンロードさせないようにする方法を紹介しました。
この記事が、あなたのEC運営のお役に立てれば幸いです。
※こちらは、Shopifyテーマ開発に詳しくない方向けのHowtoになります
※この記事は2024年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。
\ShopifyでEC構築を検討中の方へ/
現在、Shopify公式は無料のお試しキャンペーンを実施しています。
百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。
下記の案内ページからキャンペーンの詳細をご確認ください。