2016-05-27 7 views
2

Ich habe ein Youtube-Video auf meiner Seite im Navigationsmenü eingebettet. Das Dropdown-Menü fällt hinter das Video.Drop-Down-Navigation blockiert durch eingebettete Youtube-Video

Ich habe versucht, die wmode = "transparent" und es löst nicht mein Problem. Ich habe versucht & wmode = transparent &? Wmode = transparent hinter dem Youtube-Link auch ohne Erfolg.

Ich würde Ihren Ratschlag schätzen.

Mein HTML-Code ist:

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

Meine CSS ist:

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

Ändern haben Sie den Z-Index des Headers geprüft? –

+0

Ich habe noch keinen Z-Index hinzugefügt. Ich lerne nur, wie man programmiert –

+1

http://www.w3schools.com/cssref/pr_pos_z-index.asp Legen Sie einen höheren Wert von Z-Index für das Dropdown-Menü und niedrigeren Z-Index für das Video. – Frutis

Antwort

3

Als Frits vorgeschlagen zu meinem Kommentar etwas ausführlichere Antwort als Referenz hinzugefügt.

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

Versuchen z-index von Video-Container auf 0 und Z-Index der Navigation bis 99