2

ページに埋め込まれた iframe YouTube ビデオと、それをオーバーレイする必要がある CSS ドロップダウンがあります。IE10 と Firefox 20 の両方で問題が発生しました。

IE10 では、ドロップダウンはビデオの後ろに表示されます。z-indexを尊重していないようです。

FF20 では、ドロップ ダウンが上部に表示されますが、CSS3 の角がクリップされ、代わりにノッチが表示されます。CSS3 の影も表示されません。それらはiframeの背後にあると思います。以下は私の CSS で、http: //jsbin.com/edobux/1/でチェックアウトできる jsbin を作成しました。

.overlay {
  background:#eee;
  border:1px solid #ddd;
  padding:30px;
  position:absolute;
  top:20px;
  left:50%;
  width:100px;
  margin-left:-50px;
  z-index:99;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
  -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.3);
}

.wrapper {
  text-align:center;
  background:#F00;
  padding:20px;
  position:relative;
  z-index:1;
}
4

1 に答える 1

4

Flash が HTML 要素でうまく動作しないことがあります (埋め込み方法によって異なります)。YouTube の HTML5 プレーヤーを強制すると、次のように回避できます。

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>

Force HTML5 YouTube ビデオから借りたコード

于 2013-05-07T19:54:08.987 に答える