<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myP {
  background-color: #003366;
  padding: 0px;
  font-size: 30px;
}
</style>
</head>
<body bgcolor=#003366>

<a href=!-foto-galerij.html>
<button onclick="openFullscreen();"><b><font size=4px>TERUG</font></b></button>
</a>
<button onclick="openFullscreen();"><b><font size=4px>GROOT</font></b></button>
<button onclick="closeFullscreen();"><b><font size=4px>NORMAAL</font></b></button>

<button type="button" onclick="openPromoVideo();">
    <b style="font-size: 16px;">PROMO</b>
</button>

<script>
function openPromoVideo() {
    const password = prompt("Voer het wachtwoord in:");

    if (password !== "1234") {
        alert("Onjuist wachtwoord.");
        return;
    }

    const video = document.createElement("video");

    video.src = "carwash-uden.mp4";
    video.controls = true;
    video.autoplay = true;
    video.style.width = "100%";
    video.style.height = "100%";
    video.style.backgroundColor = "black";

    document.body.appendChild(video);

    let afgesloten = false;

    function sluitVideo() {
        if (afgesloten) return;
        afgesloten = true;

        video.pause();
        video.currentTime = 0;
        video.removeAttribute("src");
        video.load();
        video.remove();
    }

    // Fullscreen openen
    if (video.requestFullscreen) {
        video.requestFullscreen();
    } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
    }

    // Zodra fullscreen wordt verlaten
    document.addEventListener("fullscreenchange", function fullscreenHandler() {
        if (!document.fullscreenElement) {
            document.removeEventListener("fullscreenchange", fullscreenHandler);
            sluitVideo();
        }
    });

    // Voor Safari
    document.addEventListener("webkitfullscreenchange", function webkitHandler() {
        if (!document.webkitFullscreenElement) {
            document.removeEventListener("webkitfullscreenchange", webkitHandler);
            sluitVideo();
        }
    });

    // Video afgelopen
    video.addEventListener("ended", sluitVideo);
}
</script>


<p id="myP"><img src=carwash-uden-big.jpg width=100%></p>

<script>
/* Get the element you want displayed in fullscreen */ 
var elem = document.documentElement;

/* Function to open fullscreen mode */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem = window.top.document.body; //To break out of frame in IE
    elem.msRequestFullscreen();
  }
}

/* Function to close fullscreen mode */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    window.top.document.msExitFullscreen();
  }
}

// Events
var output = document.getElementById("img src=abdij.jpg");
document.addEventListener("fullscreenchange", function() {
  output.innerHTML = "fullscreenchange event fired!";
});
document.addEventListener("mozfullscreenchange", function() {
  output.innerHTML = "mozfullscreenchange event fired!";
});
document.addEventListener("webkitfullscreenchange", function() {
  output.innerHTML = "webkitfullscreenchange event fired!";
});
document.addEventListener("msfullscreenchange", function() {
  output.innerHTML = "msfullscreenchange event fired!";
});
</script>


</body>
</html>