### 前提・実現したいこと PCではなくタッチパネル用のWEBコンテンツに、Vimeoの動画を埋め込んでいます。右クリックで「保存」や「ソースを表示」などのコンテキストメニューを表示されないように制御したいと考えています。 ### 発生している問題・エラーメッセージ iframe埋め込みの動画プレイヤー以外の場所では、 ``` ``` や ```JavaScript $(function(){ // 画面全体で右クリックを禁止にする $(document).on("contextmenu",function(){ return false; }); }); ``` などの、ネットで紹介されている方法で右クリックを封じることができました。ただ、埋め込み動画プレイヤー上だけは、右クリックが通ってしまう状態です。自動的に作成されるiframeに対して、その領域内で右クリックを禁止する方法はありますでしょうか？ ※透明画像を上からかぶせる、という方法は使用できません。

Youtubeだったらyasutomiさんのコードと[これ（YouTube IFrame Player API）](https://developers.google.com/youtube/iframe_api_reference?hl=ja)がいけそうですね。

透明画像を上からかぶせる、という方法は**使用できます。** > ※透明画像を上からかぶせる、という方法は使用できません。 ```html .wrap { position: relative; } .overlay { position: absolute; top: 0; left: 0; } var v = document.getElementById('v') var overlay = document.querySelector('.overlay') overlay.style.width = v.clientWidth + 'px' overlay.style.height = v.clientHeight + 'px' ```

動画埋め込み枠iframe内の右クリックを禁止できるでしょうか

前提・実現したいこと

PCではなくタッチパネル用のWEBコンテンツに、Vimeoの動画を埋め込んでいます。
右クリックで「保存」や「ソースを表示」などのコンテキストメニューを表示されないように制御したいと考えています。

発生している問題・エラーメッセージ

iframe埋め込みの動画プレイヤー以外の場所では、

<body oncontextmenu="return false;">

や

JavaScript
1$(function(){
2  // 画面全体で右クリックを禁止にする
3  $(document).on("contextmenu",function(){
4    return false;
5  });
6});

などの、ネットで紹介されている方法で右クリックを封じることができました。
ただ、埋め込み動画プレイヤー上だけは、右クリックが通ってしまう状態です。

自動的に作成されるiframeに対して、その領域内で右クリックを禁止する方法はありますでしょうか？

※透明画像を上からかぶせる、という方法は使用できません。

kyoya0819

2019/08/20 11:32

> ※透明画像を上からかぶせる、という方法は使用できません。はどういう理由からでしょうか？

kujirais

2019/08/20 11:48

ご質問ありがとうございます。動画によって、埋め込み動画のサイズが複数あるため、透明画像を乗せるのが難しい状況です。

kyoya0819

2019/08/20 12:39 編集

たとえ右クリックを無効にしても画面録画で保存されてしまいますがよろしいですか？そうそうどこかのQiitaの投稿者さんが投稿していたので「動画を画像に分けて高速で切り替えればいけるんじゃね？」的な感じなのがありました。まぁご参考までに ※方法がわからずおそらく実装も不可能なので回答ではなくここに書いてます

kujirais

2019/08/20 12:39

はい。保存防止というより、外部サイトにジャンプされたり保存や印刷などのメニューを出させないのが目的です。

kyoya0819

2019/08/20 12:39

外部サイトにジャンプとは？

kujirais

2019/08/20 12:55

説明不足で申し訳ありません。限定的な公開の、部署内サイトのようなコンテンツのため、外部サイトへのリンクなどは切ってある状態なのです。

行動規範の内容に同意します

回答2件

Youtubeだったらyasutomiさんのコードとこれ（YouTube IFrame Player API）がいけそうですね。

投稿2019/08/29 09:16

編集2019/08/29 09:16

kyoya0819

総合スコア10434

透明画像を上からかぶせる、という方法は使用できます。

※透明画像を上からかぶせる、という方法は使用できません。

html
1<style>
2.wrap {
3  position: relative;
4}
5.overlay {
6  position: absolute;
7  top: 0;
8  left: 0;
9}
10</style>
11<div class="wrap">
12  <div class="overlay"></div>
13  <iframe id="v" src="https://player.vimeo.com/video/327527611" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
14</div>
15<script>
16var v = document.getElementById('v')
17var overlay = document.querySelector('.overlay')
18overlay.style.width = v.clientWidth + 'px'
19overlay.style.height = v.clientHeight + 'px'
20</script>