︎ご質問内容
動画のセクション内にmp4やYouTube動画を入れておりますが、その動画をダウンロードできないようにすることは可能でしょうか？
︎実施したいこと
会員限定にページが見れるようにし、そこで動画を貼り付けて、会員様限定に見れるようにしたいと考えております。ダウンロードができてしまうと、他で拡散されてしまうので防止できないかと考えてます。
宜しくお願い致します。
Topic summary
会員限定ページに埋め込んだmp4/YouTubeの動画をダウンロードできないようにしたいという相談。拡散防止が目的。
初期対応: JavaScriptで右クリック(PC)・長押し(スマホ)を無効化する提案。設置場所は管理画面のページで、手順は外部動画リンクで共有。
結果: 右クリックは無効化できたが、動画プレーヤーのメニューからは引き続きダウンロード可能。スクリーンショットと検証動画で状況を共有。
対応更新: 動画タグのHTMLを編集し、プレーヤー内の「ダウンロード」選択肢が出ないよう属性を変更。ユーザー側で確認され、ページ埋め込みのパターンではダウンロード項目が消失。
追加質問: セクション「動画」でカスタムCSSだけで同様制御は可能か。回答は「CSSのみでは不可」で、三点メニュー領域を擬似要素で覆うなどのハックは可能だが実装難度が高い。
現状: ページ側は解決。セクション側は具体的コード提示なく未確定。スクショ・共有動画・外部ガイド動画が理解に重要だった。
はじめまして。
株式会社ファイブビットの福水と申します。
最もシンプルな方法は、該当ページに、下記のコードを読み込ませることだと思います。
このコードは、ユーザーの右クリック(PC)、長押し(スマホ)操作を無効にするものです。
1 Like
株式会社ファイブビット 福水さま
早速のご回答、ありがとうございます。
実際、やってみましたが、設置する場所が不明でして、どのあたりにこちらのコードを入れたらよろしいでしょうか？
お手数をお掛けしますが、宜しくお願いします。
ご返信ありがとうございます。
設置する場所に関して、質問で返してしまい大変恐縮なのですが、対象となる会員限定ページのURLをご教示いただくことは可能でしょうか？
開示が難しい場合は、ドメイン部分は〇〇みたいな感じで隠していただいても大丈夫です。
1 Like
福水さま
ご連絡、ありがとうございます。
こちらはテスト環境でのURLですが2パターンを検討してます。
色々URLに名前も入ってましたので、下記をコピーしました。
こちらの内容でもわかりますでしょうか。
- ページの埋め込みのパターン
editor?previewPath=%2Fpages%2F%25E9%2599%2590%25E5%25AE%259A%25E5%258B%2595%25E7%2594%25BB§ion=template–19684533797146__main&customCss=true
2.ページの中にセクション『動画』として入れるパターン
editor?previewPath=%2Fpages%2F%25E9%2599%2590%25E5%25AE%259A%25E5%258B%2595%25E7%2594%25BB§ion=template–19684533797146__b55f6035-4876-4e35-aa3d-fb7c59b6987b
すみませんが、ご確認宜しくお願いします。
ありがとうございます。
いただいた内容を拝見する限りでは、管理画面の「ページ」から作成しているページかと認識しました。
下記動画のようにすれば、いけると思います。
https://gyazo.com/8114bec3d702693cf55112fb72232a34
↑この動画の13秒あたりで、
↑こんなコードがペーストされていますが、これを先ほど私がお伝えした
↑こちらのコードに置き換えてください。
ありがとうございます。
すみません、いただいた画像は、私が提供したコードがどこに貼ってあるかがわからないため、再度スクショなどで共有いただけますでしょうか？
分かりにくくてすみません。
もしかしたら、問題点が違うかもしれないです。
先ほど教えて頂いたコードを入れた際に、しっかり右クリックが効かないようになってるように思います。
コードの貼り付け写真と課題であるダウンロード出来てしまう動画を添付致します。
福水さま
動画も共有致します。
先ほどの写真と合わせて、アドバイスいただけると幸いです。
何度もすみません。
なるほど、ありがとうございます。
こちらこそ、要点を理解できておらず申し訳ございませんでした。
動画のHTML部分に、
という箇所がありますがが、こちらを
```markup
↑このようになるように書き換えてもらってもよろしいでしょうか？
※書き換える前に、該当の箇所はメモ帳などにバックアップをお願いします
1 Like
ありがとうございます！！！
無事にページの方でのダウンロードのセレクトが消えました。
もし、可能でしたら、セクションでのダウンロード出来ないように設定ができたりしますでしょうか？?
カスタムCSSを入れるところはあります。
よかったです。
CSSで制御できるものではないので、セクションのカスタムCSSに記述する方法は基本的には使えないですね・・・
クリティカルな方法としては、videoタグから出力される動画の縦横比率をCSSで固定して、ダウンロードボタンを表示するための三点リーダーが表示される右下あたりを擬似要素で覆ってしまう、などすれば、押せないようにはできそうです。
ここまでくると、テキスト上でのやりとりだけだと少し難しいので、コードでのお伝えが難しくなってしまい申し訳ないのですが・・・
そういう方法を取るのですね！
教えていただき、ありがとうございました。
本当に助かりました。 
1 Like