Drop down navigation blocked by embeded youtube video

2
votes

I have embeded a youtube video on my page under the navigation menu. The drop down menu is falling behind the video.

I have tried the wmode="transparent" and it isnt resolving my issue. I have tried &wmode=transparent & ?wmode=transparent behind the youtube link also with no success.

I would appreciate your advice.

My Html code is:

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

My CSS is:

  .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;
              }
2
htmlcss
have you checked the z-index of the header? – Vitorino fernandes
I havent added any z-index as yet. Im just learning how to code – Kellie Bottrell
w3schools.com/cssref/pr_pos_z-index.asp Set a higher value of z-index for the dropdown menu, and lower z-index for the video. – Frutis
can you provided your html code? – Mukesh Ram
Don't worry Kellie, @Frutis has already been kind enough to do it for you :) if you haven't yet, remember to up vote his answer :) – Frits

2 Answers

3
votes

As Frits suggested adding a bit more detailed answer as a reference to my comment.

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

Try changing z-index of video container to 0 and Z-index of navigation to 99