クリックして反応する動画<a>要素（IE10）

Question

まだIE10を使用しているクライアント（悲しいことに、悲しいことに、ここではアップグレードはオプションではないようです）が、設定したHTMLの問題を報告しています。

ビデオはVimeo iframe経由で埋め込まれていますが、これは動画の上に幅100％の高さ100％の絶対的な位置にあるリンクでオーバーレイされています。このリンクをクリックすると、ビデオのどこをクリックしても、リンクは予期したとおりに続行されます。

IE10の「リンク」をクリックすると、ビデオが反応して一時停止し、リンクテキストが明示的にクリックされない限り、リンクが続きます。

ラフコード概要は次のとおりです。リンクが本当にクリックに反応することはできませんので、映像と映像にオーバーレイするように、古いブラウザでは、この問題を解決する方法は

<div> 
    <iframe width="100%" height="100%" src="VIMEO URL HERE"></iframe> 
    <a href="/link-here">link text</a> 
</div> 

div { 
    position: relative; 
} 

iframe { 
    position: absolute; 
    z-index: 1; 
} 

a { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 5; 
} 

ありますか？ Javascriptソリューションが必要な場合は、サイトにjQuery 1.xがあります（これはかなり古いものですが、再構築の途中です）

問題の背後にあるコードを示していますが、 IE10では開けません！ http://codepen.io/anon/pen/vxLEgQ

Answer 1

したがって、自分のコード例に基づいて私の独自の例を作成しました。今はIE 11でしかテストできず、IE 10をエミュレートしています。ここにはネイティブIE 10はありませんが、これは「実際の」IEでも動作するはずです。通常、その修正が、背景を設定し、rgbaを経由してその背景にはちょうどかかわらず、動作していないようtransparentキーワードを使用して（だけでなく透明にすることができる -

古いIEは時々問題適切に「透明」の要素のクリックをキャッチしています。 ）

だけでなくIE 10で、それが適切にクリッカブルにするべきである、だから、試してみて、単にあなたのリンクのためにこれを追加します。

background: rgba(255,255,255,0);