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

[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