JSFiddle - React, Tailwind, and code Playground

by Sébastien Lorentz

HTML

<h1>Appuyez sur le bouton ci-dessous pour afficher l'image pendant 5 secondes</h1>
<h2>Vous devrez par la suite répondre à un questionnaire</h2>
<button disabled="disabled">
  Montrer l'image
</button>
<img src="http://i.imgur.com/dLXX4nS.png" style="position: absolute; display:none; top:0px; left: 0px;">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSc1y1hbRObL2tGcjLfGysAB_ANy5Nix51IuMvhoONpDKvQ5fA/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0" style="display: none; position:absolute; top:0px; left: 0px;">Chargement en cours...</iframe>

JavaScript

var docelem = document.documentElement;

var image = document.createElement('img');
image.src = "https://i.imgur.com/C43FFq1.png";
image.setAttribute("style", 'style="position: absolute; display:none; top:0px; left: 0px;"');
image.onload = () => {
  document.querySelector("button").removeAttribute("disabled");
};

document.querySelector("button").addEventListener("click", () => {


  if (docelem.requestFullscreen) {
    docelem.requestFullscreen();
  } else if (docelem.mozRequestFullScreen) {
    docelem.mozRequestFullScreen();
  } else if (docelem.webkitRequestFullscreen) {
    docelem.webkitRequestFullscreen();
  } else if (docelem.msRequestFullscreen) {
    docelem.msRequestFullscreen();
  }

  document.querySelector("img").style.display = "";
  setTimeout(function() {
    document.querySelector("img").style.display = "none";
    document.querySelector("iframe").style.width = "100%";
    document.querySelector("iframe").style.height = "100%";
    document.querySelector("iframe").style.display = "";
  }, 5000);
})