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

[klawischnigg]

Hi there,

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

Naja, das ist nicht irgendein Wert, das ist (2^31)-1 - ich nehm' an, das ist der größte (oder kleinste) Wert, mit dem das blöde jQuery noch umgehen kann (vielleicht ist das auch eine Beschränkung v. Javascript selbst (in diesem Zusammenhang)) - jedenfalls kann es leicht sein, daß Du da nichts mehr dazuzählen kannst.

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

siehe oben.

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.

Ja, dann rutscht sie halt drunter. Weniger geht offensichtlich.

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

Das ist immer eine gute Frage - vor allem dann, wenn man irgendetwas einbaut oder verwendet, das jemand anderer liefert. Wenn Du nichts geändert hast, dann verwendest Du vielleicht eine neue Version vom blöden jQuery oder Google hat irgendwas an der API geändert?

[Rolf B]

Hallo klawischnigg,

das mag sogar sinnvoll sein; ich kann im Chrome-Debugger zwar größere Werte als MAXINT32 eintragen, aber wenn ich in den Bereich von MAXINT64 komme, wird es schwierig; das einfache "Pfeil-auf" / "Pfeil-ab" um Werte um 1 zu ändern funktioniert nicht mehr.

Die Spec sagt: z-index ist ein "integer", ohne dass ich an der Stelle eine Definition gefunden habe welche Wortlänge da gemeint ist - und scheinbar wird damit ein int32 assoziiert.

Rolf

[ebody]

Hallo,

danke für die Antwort, kann natürlich gut sein. Ich wundere mich einfach sehr, dass das jetzt innerhalb von 2 Tagen geändert wurde. Im Code kann ich nichts entdecken, was ich geändert hätte und evtl. dazu führt.

Ich habe jetzt versucht den z-index vom IFrame -1 zu setzen $("iframe#player").css("z-index",getZIndex-1);

In den Developer Tools / Elements wird unter Styles folgendes angezeigt:

element.style {
    opacity: 0.99;
    z-index: 2147483646; /* wird durchgestrichen angezeigt */
}

:-webkit-full-screen{ user agent stylesheet
background-color: white;
z-index: 2147483647;

Wie kann man auf den z-index von :-webkit-full-screen zugreifen?

Gruß ebody

[klawischnigg]

Hi there,

danke für die Antwort, kann natürlich gut sein. Ich wundere mich einfach sehr, dass das jetzt innerhalb von 2 Tagen geändert wurde.

Naja, wenn sich wiklirch etwas ändert haben sollte, dann ist das vermutlich kein Prozess, der zwei Tage in Anspruch nimmt...😉

Ich habe jetzt versucht den z-index vom IFrame -1 zu setzen $("iframe#player").css("z-index",getZIndex-1);

In den Developer Tools / Elements wird unter Styles folgendes angezeigt:

element.style {
    opacity: 0.99;
    z-index: 2147483646; /* wird durchgestrichen angezeigt */
}

durchgestrichen bedeutet, daß es entweder irgendwo eine die selbe Eigenschaft Bestimmende CSS-Anweisung gibt, die eine höhere Spezifität aufweist oder aber, daß diese Eigenschaft auf ein bestimmtes Element nicht anwendbar ist. Das könnte zB in Deinem Fall daran liegen, daß entweder für Dein Element irgendwo noch ein anderer z-Index bestimmt wird oder aber (was ich vermute), daß Dein Iframe so positioniert wird, daß z-Index für ihn gar keine Bedeutung hat. Das findest Du heraus, indem Du dem Element in den Developer-Tools zusätzlich zB die Eigenschaft position:relative gibst - dann sollte sich in diesem Fall etwas ändern.

(Davon abgesehen: opacity:0.99 schaut mir irgendwie sehr nach "Trickserei" aus. Wozu braucht man ein Element, daß zu 99% sichtbar ist???)

:-webkit-full-screen{ user agent stylesheet background-color: white; z-index: 2147483647;

Wie kann man auf den z-index von :-webkit-full-screen zugreifen?

Keine Ahnung, das ist eine Browserspezifische Anweisung, die nur für Webkit-Browser gilt. Welchen Browser verwendest Du?

Was ich generell sonst noch sagen wollte: wenn das Element zwar angezeigt, aber nicht angeklickt oder was weiß ich werden kann, dann ist der z-Index vermutlich ohnehin nicht die Baustelle, auf der Du herumbastel solltest. Dann gibts entweder irgendein Problem beim Attachen der Handler, oder aber, was häufig der Fall ist und oft nicht gefunden wird, irgendein unsichtbares Element legt sich über Dein (nicht) anklickbares Div. Dann siehst Du die Box zwar, kannst aber mit ihr (zumindest nicht mit Maus oder Wischen) nicht interagieren. Nur so eine Idee…

[ebody]

Hallo,

(Davon abgesehen: opacity:0.99 schaut mir irgendwie sehr nach "Trickserei" aus. Wozu braucht man ein Element, daß zu 99% sichtbar ist???)

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.

Keine Ahnung, das ist eine Browserspezifische Anweisung, die nur für Webkit-Browser gilt. Welchen Browser verwendest Du?

Chrome, soll später aber auch im Firefox, Safari und IE funktionieren.

Was ich generell sonst noch sagen wollte: wenn das Element zwar angezeigt, aber nicht angeklickt oder was weiß ich werden kann, dann ist der z-Index vermutlich ohnehin nicht die Baustelle, auf der Du herumbastel solltest. Dann gibts entweder irgendein Problem beim Attachen der Handler, oder aber, was häufig der Fall ist und oft nicht gefunden wird, irgendein unsichtbares Element legt sich über Dein (nicht) anklickbares Div. Dann siehst Du die Box zwar, kannst aber mit ihr (zumindest nicht mit Maus oder Wischen) nicht interagieren. Nur so eine Idee…

Ja es scheint auch so zu sein, dass irgendwas drüber liegt, aber eigentlich kann es nur das Iframe sein und der darin enthaltene Code. Ich bin mir sehr sicher, dass es am CSS Code liegt -webkit-full-screen{...} wo auch der z-index festgelegt wird. Diesen kann man aber leider nicht in den Developer Tools anpassen, das CSS hat hier einen grauen Hintergrund und man kann nichts ändern.

Wenn ich den CSS Code bearbeiten könnte, wüsste ich zumindest, ob es daran liegt.

Gruß ebody

[klawischnigg]

Hi there,

Ja es scheint auch so zu sein, dass irgendwas drüber liegt, aber eigentlich kann es nur das Iframe sein und der darin enthaltene Code.

Eigentlich nicht. Wenn etwas darüber liegt, dann muß es aus Deiner Seite kommen.

Ich bin mir sehr sicher, dass es am CSS Code liegt -webkit-full-screen{...} wo auch der z-index festgelegt wird. Diesen kann man aber leider nicht in den Developer Tools anpassen, das CSS hat hier einen grauen Hintergrund und man kann nichts ändern.

Wenn ich den CSS Code bearbeiten könnte, wüsste ich zumindest, ob es daran liegt.

Eher auch nicht. Wenn Du ein Ebenen-Problem hast, dann ist alles, was im Iframe ist, eigentlich irrelevant. Wenn -webkit-full-screen das Problem sein sollte (halte ich aber eher für unwahrscheinlich), dann probier die Geschichte einfach im Firefox aus, der reagiert auf -webkit-irgendwas unter Garantie nicht. Auch auf die Gefahr mich zu wiederholen;) - ich denke, daß Du irgendetwas auf Deiner Seite hast, das sich über Deine anklickbare Box legt.

Kann man sich das irgendwo ansehen?

[ebody]

Hi,

den Code kann ich nicht veröffentlichen, notfalls würde ich aber versuchen diesen reduziert mit gleichem Problem nachzubauen. Evtl. erkennt man aber an den Screenshots das Problem.

Diese Meldung erscheint erst seit kurzem. Was ich so lesen konnte, handelt es sich hierbei um einen Chrome Bug. Ob das evtl. mit dem Problem zusammenhängt, kann ich nicht wirklich sagen:

Gruß ebody

[Matthias Apsel]

Hallo ebody,

Elemente können nur einen z-index besitzen, falls sie über eine Angabe zu position verfügen, die von static abweicht oder sie flex-items sind.

Edit: Das scheint so zu sein. Die Werte für z-index erscheinen mir sinnfrei. Verwende doch mal 10 und 100.

Bis demnächst
Matthias

[klawischnigg]

Hi there,

den Code kann ich nicht veröffentlichen, notfalls würde ich aber versuchen diesen reduziert mit gleichem Problem nachzubauen. Evtl. erkennt man aber an den Screenshots das Problem.

Leider, das ist zu schlecht aufgelöst, ich kann da nix erkennen...

Diese Meldung erscheint erst seit kurzem. Was ich so lesen konnte, handelt es sich hierbei um einen Chrome Bug. Ob das evtl. mit dem Problem zusammenhängt, kann ich nicht wirklich sagen:

Ziemlich sicher nicht. Fehlermeldungen in denen das Wort "protection" vorkommt, kann man getrost alle ignorieren…

[ebody]

Hallo zusammen,

da jeder Versuch gescheitert ist, habe ich es anders gelöst.

Ich habe das <div> welches durch das Iframe ersetzt wird, mit <div id="playerBox"> umrahmt. Zudem einen "Fullscreen Button" hinzugefügt, bestehend aus einem weiteren <div>. Klickt man auf diesen Button wird dieses Script ausgeführt.

function vollbild() {

			  var element = document.getElementById("playerBox");

			  if (element.requestFullScreen) {

				if (!document.fullScreen) {
				  element.requestFullscreen();
				} else {
				  document.exitFullScreen();
				}

			  } else if (element.mozRequestFullScreen) {

				if (!document.mozFullScreen) {
				  element.mozRequestFullScreen();
				} else {
				  document.mozCancelFullScreen();
				}

			  } else if (element.webkitRequestFullScreen) {

				if (!document.webkitIsFullScreen) {
				  element.webkitRequestFullScreen();
				} else {
				  document.webkitCancelFullScreen();
				}

			  }

			}

document.getElementById("fullscreenButton").addEventListener("click", vollbild, false);

Das Video wird im Vollbildmodus angezeigt. Die Box die über dem Video gezeigt und greifbar sein soll ist nun zumindest im Chrome immer sichtbar und greifbar. Andere Browser habe ich noch nicht getestet. Im CSS habe ich gar kein z-index gesetzt.

Im Youtube API Script und in CSS musste ich noch ein paar Anpassungen vornehmen, damit sich das Video immer an die Größe von #playerBox anpasst.

Vielen Dank an alle für eure Hilfe!

Gruß ebody