Как спозиционировать дополнительные элементы управления видео чтобы они не слетали при разворачивании на весь экран?

Оказалось что стандартный тег video разворачивает видео в фулскрин модальное окно(top-layer(1)), что означает что никакая верстка не будет видна из под развернутого видео. И потому приходится писать кнопку фулскрина, которая будет разворачивать на весь экран родителя тега video и размещать ее поверх стандартной кнопки тега video: HTML:

<div class="relatVid"> 
<video class="myVideo"  id="myVideo"  controls="controls"  src=""> 
</video>
 <div class="fullscreen-button"><div></div></div>
<div id="spinner3" class="spinner"></div>
</div>

CSS:

 .relatVid {
     display: flex;
     max-height: 500px;
     margin-bottom: 0;
     align-items: center;
     justify-content: center;
 }
 #spinner3 {
      border: 1px solid red;
      background-image: url(/ico/star.jpg);
      background-size: cover;
      animation: spin4 1.2s linear infinite;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: absolute;
 }
.fullscreen-button{
     width: 47px;
     height: 47px;
     border: 1px solid red;
     position: absolute;
     right: 0px;
     bottom: 59px;
     right: 48px;
     cursor: pointer;
}

.fullscreen-button:hover div{ 
    background-color: rgba(0, 0, 0, .3);
    border-radius: 25px;
    width: 35px;
    height: 35px;
    margin-left: 6px;
    margin-top: 6px;
}

JS:

window.onload = function() {


let fullscreenButton = document.querySelector(".fullscreen-button");
let videoContainer = document.querySelector(".relatVid");
let videoVFull = document.querySelector(".myVideo");
let controlsQ = document.querySelector(".controlsQ");


fullscreenButton.addEventListener("click", function() {
// Получаем элемент, который находится в полноэкранном режиме, или null, если такого нет
let fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;

// Проверяем, находится ли документ в полноэкранном режиме
if (fullscreenElement) {
// Выходим из полноэкранного режима с помощью соответствующего метода
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}

} else {
// Входим в полноэкранный режим с помощью соответствующего метода
if (videoContainer.requestFullscreen) {
videoContainer.requestFullscreen();
} else if (videoContainer.mozRequestFullScreen) {
videoContainer.mozRequestFullScreen();
} else if (videoContainer.webkitRequestFullscreen) {
videoContainer.webkitRequestFullscreen();
} else if (videoContainer.msRequestFullscreen) {
videoContainer.msRequestFullscreen();
}

}
});

//добавим обработчик при входе и выходе документа из полноэкранного режима чтобы менять стили не только при выходе из фулскрина нашей кнопкой, но и с помощью Esc например.
document.addEventListener("fullscreenchange", function() {
   
// Получаем элемент, который находится в полноэкранном режиме, или null, если такого нет
let fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
// Проверяем, находится ли документ в полноэкранном режиме
if (fullscreenElement) {
videoVFull.style.maxHeight = "none"; // Изменяем свойство maxHeight на none
videoContainer.style.maxHeight = "none"; // Изменяем свойство maxHeight на none
fullscreenButton.style.bottom = "27px";  //Подвинем кнопку фулскрина
controlsQ.style.bottom = "27px";  //Подвинем кнопку фулскрина
}else{
videoVFull.style.maxHeight = "500px"; // Изменяем свойство maxHeight на 500
videoContainer.style.maxHeight = "500px"; // Изменяем свойство maxHeight на 500
fullscreenButton.style.bottom = "59px";  //Подвинем кнопку фулскрина
controlsQ.style.bottom = "59px";  //Подвинем кнопку фулскрина
}

});
};