iFrame im Hintergrund mit Z-Index, keine Menüsteuerung?

Question

Ich entwickle eine Webseite, die einen iframe als Hintergrund setzt, weil andere div-Elemente "damit spielen". Mit Z-Index ist es im Hintergrundbereich sichtbar, aber ich muss es steuern können, und die Steuerelemente, die normalerweise vorhanden sind, fehlen. Hier ist der Haupt-Code:

Hier ist der html:

<div class="bg-about"> 
    <iframe src="https://player.vimeo.com/video/54960454?title=0&amp;byline=0&amp;portrait=0;autoplay=1"></iframe> 
    <div id="iframe"></div> 
</div> 

Hier ist die CSS:

iframe { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
#iframe { 
    position: absolute; 
    z-index: 2; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 

Irgendwelche Ideen? Ich brauche wirklich die Kontrollen. Hinweis: Der Hintergrund liegt eigentlich nicht hinter irgendetwas, aber aufgrund der Formatierung muss er im Hintergrund sein. Und ich bin mir nicht sicher, warum es falsch angezeigt wurde.

Answer 1

Sie decken das Video mit dem #iframe ab, sodass Sie kein Video rollen können, um die Steuerelemente anzuzeigen. Ich habe nur den z-Index von Video zu 2 und #iframe zu 1 getauscht. Sie haben nur versehentlich Video mit div abgedeckt.

iframe { 
position: absolute; 
z-index: 2; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 
#iframe { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 

hier ist Link: https://jsfiddle.net/keinchy/asga90Lg/