Youtube IFrame API - Div Box im Vollbildmodus vor das Video setzen für Mouse Events

[ebody]

Hallo,

wenn ich das Video im Vollbildmodus anzeige, welches ich über die Youtube Iframe API einbinde, soll eine Div Box zu sehen sein und auf Mouse Events wie Mouseenter oder Clicks reagieren können.

Bis vor ein paar Tagen hat das auch funktioniert, komischerweise jetzt nicht mehr. Die Box wird zwar angezeigt, aber ist mit der Maus nicht mehr "greifbar".

// Youtube Vollbild Modus monitoren
document.addEventListener("webkitfullscreenchange", function() {
			
console.log("Vollbild!"); 
				
// z-index der Youtube Box ermitteln
var getZIndex = $("iframe#player").css("z-index");
				
//$("iframe#player").css("opacity",".99");
				
// Box im z-index 1 höher als den von youtube setzen
$("#Container").css("z-index",getZIndex+1);			

}, false);

Der z-index von #Container hat in den Developer Tools unter Elements immer den gleichen Wert wie das Iframe : 2147483647

Selbst wenn ich den z-index festsetze $("#Container").css("z-index","2147483648"); erhält #Container den Wert z-index: 2147483647

Ich habe auch diese Zeile zusätzlich getestet $("iframe#player").css("opacity",".99"); aufgrund dieses Artikels https://philipwalton.com/articles/what-no-one-told-you-about-z-index/, aber das hat leider auch nichts gebracht.

Auch wenn ich in den Developer Tools unter Elements den z-index von #Container ändere funktioniert es nicht. Wenn ich den z-index um 1 kleiner als den vom IFrame stelle 2147483646 verschwindet die Box.

Ich habe überhaupt keine Ahnung, warum das noch vorgestern funktioniert hat und jetzt nicht mehr.

Hat jemand eine Idee, warum der z-index von #Container nicht höher gesetzt wird?

Gruß ebody