Question

我在导航菜单下的网页上嵌入了YouTube视频。下拉菜单落后于视频。

我试过wmode =＆＃34;透明＆＃34;它没有解决我的问题。我试过＆amp; wmode = transparent＆amp; ？wmode = youtube链接背后的透明也没有成功。

我很感激你的意见。

我的Html代码是：

  <div class="video-container2">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Fr7Haxh4Si0" wmode="transparent" frameborder="0" allowfullscreen></iframe>
  </div>

我的CSS是：

  .video-container2 {
              position: relative;
              padding-bottom: 56.25%;
              padding-top: 20px; 
              height: 0; 
              overflow: hidden;
             }

  .video-container2 iframe,
  .video-container2 object,
  .video-container2 embed {
              position: absolute;
              top: 0;
              left: 0;
              width: 90%;
              height: 50%;
              margin-left: 0px;
              margin-bottom: 5px;
              }

Answer 1

Frits建议添加更详细的答案作为我评论的参考。

.video-container2 {
    z-index: -1;
    }
.dropdown_menu {
    z-index: 1;
    }

Answer 2

尝试将视频容器的z-index更改为0，将导航的Z-index更改为99

下载由嵌入的YouTube视频阻止的导航

2 个答案: