How to add video controls over the video

I have a video with my custom controls.

I need to make the controls available at any time., but when I open fullscreen version of the video, the controls hide.

Here is my code:

var video = document.querySelector(".video");
var toggleButton = document.querySelector(".toggleButton");
var toggleButtonId = document.getElementById("toggleButton");
var progress = document.querySelector(".progress");
var progressBar = document.querySelector(".progress__filled");
var progressId = document.getElementById('progressId');
var volumeBar = document.getElementById('volume-bar');
function togglePlay() {
 if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
 }
}
function updateToggleButton() {
  toggleButtonId.innerHTML = video.paused ? "►" : "❚❚";
}

function handleProgress() {
  const progressPercentage = (video.currentTime / video.duration) * 100;
  progressBar.style.flexBasis = `${progressPercentage}%`;
}

function scrub(e) {
  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
  video.currentTime = scrubTime;
}
volumeBar.addEventListener("change", function(evt) {
    video.volume = evt.target.value;
});
video.addEventListener("click", togglePlay);
video.addEventListener("play", updateToggleButton);
video.addEventListener("pause", updateToggleButton);

video.addEventListener("timeupdate", handleProgress);
progressId.addEventListener("click", scrub);
var mousedown = false;
progressId.addEventListener("mousedown", () => (mousedown = true));
progressId.addEventListener("mousemove", (e) => mousedown && scrub(e));
progressId.addEventListener("mouseup", () => (mousedown = false));
function toggleFullScreen() {
  if (video.requestFullscreen) {
      if (document.fullScreenElement) {
          document.cancelFullScreen();
      } else {
          video.requestFullscreen();
      }
  }
  else if (video.msRequestFullscreen) {
      if (document.msFullscreenElement) {
          document.msExitFullscreen();
      } else {
          video.msRequestFullscreen();
      }
  }
  else if (video.mozRequestFullScreen) {
      if (document.mozFullScreenElement) {
          document.mozCancelFullScreen();
      } else {
          video.mozRequestFullScreen();
      }
  }
  else if (video.webkitRequestFullscreen) {
      if (document.webkitFullscreenElement) {
          document.webkitCancelFullScreen();
      } else {
          video.webkitRequestFullscreen();
      }
  }
  else {
      alert("Pantalla completa no esta soportada");
  }
}

<html data-bs-theme="dark" >
  <head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

  </head>
  <div>
<video id="video" class="video w-100">
<source src="https://test.loro.ec/www/t/test.loro.ec/images/articles_blocks/608.mp4" type="video/mp4">
</video>
  <div class="controls position-relative" style="top: -50px;margin-left: 8px;">
  <div class="row">
  <div class="col-1">
      <button class="controls__button toggleButton btn" id="toggleButton" title="Toggle Play" onclick="togglePlay()">►</button>
      </div>
      <div class="progress col-5 p-0" id="progressId">
      <div class="progress__filled" style="background: rebeccapurple;"></div>
    </div>
    <div class="col-4">
     <i class="bi bi-volume-up"></i> 
     <input class="form-range" style="width: 80%;" type="range" id="volume-bar" title="volume" min="0" max="1" step="0.1" value="1">
     </div>
  <div class="col-1">
    <button class="btn" onclick="toggleFullScreen()"><i class="bi bi-arrows-fullscreen"></i></button>
    </div>
    </div>
  </div></div>
</html>

Codepen: https://codepen.io/alexvambato/pen/QWYGeGV

I have implemented external library (bootstrap)

I need any answer without the use of jquery

Solution

You need to put your video player content (icon, video object etc) into one <div>,
then fullscreen that specific div element. Also this other Answer might help you.

Solution:
In the example code below, a new div with id of container_vid is created to contain the <video> tag together with its related UI elements.

(1) Update your JavaScript code:

In your first line (about var video etc...) update it to access "container" div as a variable.

var container_vid = document.getElementById("vid_container");
var video = document.querySelector(".video");
//etc... etc... rest of JS code

Then update your function toggleFullScreen() as:

function toggleFullScreen() 
{
  if (container_vid.requestFullscreen) 
  {
      if (document.fullScreenElement) { document.cancelFullScreen(); } 
      else { container_vid.requestFullscreen(); }
  }
  else if (container_vid.msRequestFullscreen) 
  {
      if (document.msFullscreenElement) { document.msExitFullscreen(); } 
      else { container_vid.msRequestFullscreen(); }
  }
  else if (container_vid.mozRequestFullScreen) 
  {
      if (document.mozFullScreenElement) { document.mozCancelFullScreen(); } 
      else { container_vid.mozRequestFullScreen(); }
  }
  else if (container_vid.webkitRequestFullscreen) 
  {
      if (document.webkitFullscreenElement) { document.webkitCancelFullScreen(); } 
      else { container_vid.webkitRequestFullscreen(); }
  }
  else { alert("Pantalla completa no esta soportada"); }
}

(2) Update the HTML code to include a container <div> :

<html data-bs-theme="dark" >
<head>
</head>
<div>

<div id="vid_container" > <!--open new div for containing video UI -->

<video id="video" class="video w-100">
<source src="https://test.loro.ec/www/t/test.loro.ec/images/articles_blocks/608.mp4" type="video/mp4">
</video>
<div class="controls position-relative" style="top: -50px;margin-left: 8px;">
<div class="row">
<div class="col-1">
  <button class="controls__button toggleButton btn" id="toggleButton" title="Toggle Play" onclick="togglePlay()">►</button>
  </div>
  <div class="progress col-5 p-0" id="progressId">
  <div class="progress__filled" style="background: rebeccapurple;"></div>
</div>
<div class="col-4">
 <i class="bi bi-volume-up"></i> 
 <input class="form-range" style="width: 80%;" type="range" id="volume-bar" title="volume" min="0" max="1" step="0.1" value="1">
 </div>
<div class="col-1">
<button class="btn" onclick="toggleFullScreen()"><i class="bi bi-arrows-fullscreen"></i></button>
</div>
</div>
</div>

</div>  <!-- close div for containing video UI -->

</div>
</html>