Fullscreen with Javascript

Make a div, video or canvas element go fullscreen using HTML5. (simulates pressing F11)

by Alexandre Froger

HTML

<h1>Fullscreen Test</h1>
<p>Based on
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode" target="_blank">MDN Full Screen Tutorial</a>. Doesn't seem to work in jsfiddle.
</p>

<h2>Div</h2>
<div id="testDiv">
    <div width="80%" class="child-div">
      <video controls id="testVideo">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4"></source>
      </video>
    </div>
    <div>
        test
    </div>
</div>
<button type="button" id="fullscreenBtn">Go Fullscreen (Div)</button>

CSS

#testDiv, #testCanvas {
    min-width: 2em; min-height: 2em;
    border: dashed 1px #666;
    display: flex;        /* Utilise Flexbox pour l'alignement des éléments enfants */
  justify-content: space-between;  /* Espace entre les deux divs */
  width: 100%;     
}


.child-div {
  flex: 1;               /* Chaque div enfant occupe un espace égal */
  padding: 10px;         /* Optionnel : pour ajouter de l'espace interne */
  border: 1px solid #ccc; /* Optionnel : pour visualiser les divs */
}

.child-div:first-child {
  margin-right: 10px;    /* Ajoute un espace entre les deux divs */
}

JavaScript

document.getElementById("fullscreenBtn").addEventListener("click", function() {
  const parentDiv = document.getElementsByClassName("css-1dz9s7g");

  if (parentDiv.requestFullscreen) {
    parentDiv.requestFullscreen();
  } else if (parentDiv.webkitRequestFullscreen) { /* Safari */
    parentDiv.webkitRequestFullscreen();
  } else if (parentDiv.msRequestFullscreen) { /* IE11 */
    parentDiv.msRequestFullscreen();
  }
});