iframe - Flash コンテンツを含む iframe の上の Div

Question

Flash コンテンツ (YouTube ビデオなど) を含む iframe の上に div を配置したいと考えています。iframe のコンテンツにアクセスできないため、そこにあるものを変更することはできません。

私は多くのことを試しました（z-index ...すべて）。しかし、何も機能しません。私は本当に解決策を見つけることができないので、私は尋ねているだけです:(

問題は、iframe に Flash コンテンツが含まれていることです。

Answer 1

残念ながら、回答の作成をテストするためのフラッシュファイルがないため、テスト済みのソリューションを実際に支援することはできませんが、なぜこれが起こっているのかを説明できます.

Flash はブラウザー プラグインです。つまり、Flash ムービーは実際には HTML ドキュメントの一部ではありません。代わりに、プラグインを実行するためにページの領域が予約され、プラグインが呼び出されてページの「上部」で実行されます。したがって、他の要素に z-index を設定しても、実際に問題が解決されることはありません。どのような組み合わせを試しても問題はありません。

ただし、「wmode」と呼ばれる、プラグインが認識する要素自体に設定できる「魔法の」パラメーター/属性があります。このパラメータ/属性を「透明」に設定すると、Flash プラグインは一部の HTML 要素を透過させ、それらが Flash ムービーの上にあるように見せます。

iframe の所有者に連絡して wmode パラメータを透明に設定できる場合は、それを行うことをお勧めします。これが youtube または vimeo の埋め込みである場合は、パラメーターを自分で追加するためのドキュメントまたはオプションがあるかどうかを確認してください。

ここでは JavaScript でさえ友達にならないため、できることはあまりないことに失敗します (セキュリティ上の理由から、JS を使用してフレームの内容を変更することはできません)。

編集：

Flash の代わりに HTML5 ビデオを使用する方法があれば、それが役立つことを思い出してください。HTML5 ビデオはドキュメント オブジェクト モデルの一部としてレンダリングされるため、z-index プロパティを介して制御できます。

ニール

Answer 2

iframeタグの z-index は最高です。それらはページ上で何よりも優先されます。iframeただし、上下に配置して、その中にテキストを入れることができます。

jsFiddle: http://jsfiddle.net/USqxj/30/

<div><iframe style="width:100px;height:100px;"></iframe></div>
<div><iframe style="width:50px;height:50px;position:absolute;margin-top:-85px;left:25px;"></iframe></div>