質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

9913閲覧

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

kujirais

総合スコア7

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/08/20 11:27

編集2022/01/12 10:55

前提・実現したいこと

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

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

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

<body oncontextmenu="return false;">

JavaScript

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答2

0

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

投稿2019/08/29 09:16

編集2019/08/29 09:16
kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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>

投稿2019/08/20 12:12

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kujirais

2019/08/20 12:23

早速のご教示ありがとうございます! 再生領域を覆うことができました。 ただ申し訳ありません、動画の再生ウィンドウのため、完全に覆ってしまうわけにもいかず、再生ボタンやスクロールバーの部分はクリック可能である必要があります。 また、その際に空けた穴の部分で右クリックを実行されることが想定されます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問