Question

我的网页上有一个嵌入式iframe YouTube视频，而我需要覆盖它的CSS下拉菜单。我在IE10和Firefox 20中遇到了问题。

在IE10中，视频后面会显示下拉列表。它似乎不尊重z-index。

在FF20中，下拉显示在顶部，但CSS3角落被剪切并显示缺口。 CSS3阴影也不会出现。我假设他们落后于iframe。下面是我的CSS，我创建了一个jsbin，你可以在http://jsbin.com/edobux/1/

结帐

.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;
}

Answer 1

有时Flash不能很好地使用HTML元素（取决于你如何嵌入它）。如果你强制使用YouTube的HTML5播放器，你可以解决它：

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

从Force HTML5 youtube video

借来的代码

跨浏览器绝对定位div over iframe？

1 个答案: