logo

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

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

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になります

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

※この記事は2024年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

\ShopifyでEC構築を検討中の方へ/

現在、Shopify公式は無料のお試しキャンペーンを実施しています。

Shopify

百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。

下記の案内ページからキャンペーンの詳細をご確認ください。

【150円×1ヶ月】CP実施中!!

サービス

Service

- プロジェクトプラン -

こんな方におすすめ!

  • これからShopifyでECを立ち上げるための支援をしてほしい

  • 自社で取ってきたShopify案件のディレクションや開発業務を任せたい

  • 自社サービスとShopifyを連携させたアプリケーションを作ってほしい

- サポートプラン -

こんな方におすすめ!

  • 自社でShopifyストアを立ち上げてみたが、やはり専門家がいないと厳しいため、相談できるパートナーがほしい

  • 自社で受けたShopify案件の一部を、Shopifyに強い開発者に相談したい

  • 開発してもらったShopifyアプリの保守やメンテナンスをお願いしたい

- SESプラン -

こんな方におすすめ!

  • ストアの改修や更新業務が忙しくなってきたため、色々な業務をお願いできて専門的なスキルを持っている人材がほしい

  • 自社でShopify案件が溢れてしまい、数ヶ月間、スピーディかつ自由に案件を依頼できる外部のパートナーがほしい

事例

Works

ストア開発/支援

Shopify Store

累計100以上のShopifyストア開発経験を基に、商材・業界ごとに無駄のないご提案~実装が可能です。また、既に公開されているShopifyストアを、技術的な観点から保守/サポートさせて頂いております。弊社が構築していないストア様も、ご加入が可能です。

アプリ開発

Shopify App

各ストアに特化したカスタムアプリだけでなく、Shopify App Storeに掲載できる公開アプリ開発のご相談・ご依頼を承っています。例えば、自社サービスで構築しているAPIとShopifyのAPIを連携~Shopify App Storeで公開することで、Shopifyを使用しているEC事業者に自社サービスをリーチさせることができます。