switching to full-screen yields different results when using the video button and a programmed equivalent

I have a simple web application to display media files (images as well as videos). By default, the application uses part of the screen for controls and the rest for display of the media files. One of the possible actions the user may trigger is to switch to full-screen mode. This is implemented by invoking the requestFullscreen() method to the media container div. When this is done, the application switches to full-screen while two divs are shown on top with a reduced set of buttons (e.g. "next", "prev") and general info related to the shown media file.

When a video file is displays, the video player includes an equivalent button to switch to full-screen mode (and, of course, another button to return to normal). When this button is clicked, full-screen mode is entered BUT the two additional divs are now invisible. I checked setting the z-index very high but these divs remain hidden.

My question is: What is the difference in between the behavior of programmatically triggering full-screen vs. clicking on the video player button?

Alternatively, is there a way to instruct the media player to hide the full-screen button?

Thanks.

EDIT:

Following Mehwarz's comment, I'm adding the HTML of the media part's container as well as one of the divs that are not shown when using the video's full-screen control:

Container:

 <div id="Images_Clips_Container" style="max-width: 1400px; height: 99%;position: absolute;text-align: center;">
 ...
 </div>

Hidden div:

<div id="Media_File_Info_Container" style="position:absolute; top:0px; left: 0px; text-align: left ;background-color: rgba(0,0,0,.5);color: #c0c0c0;z-index: 100000;">
...
</div>

I hope this helps.

EDIT-2:

The element used to play videos is the standard <video> one:

<video id="Shown_Clip" style="position:absolute;width:100%;height:99%;object-fit: contain; overflow: hidden;display:none" onended="Handle_Video_Clip_End()" controls>
    <source id="Video_Clip_Source" src="" type="video/mp4">
</video>

It is located within the container div shown above. As stated, clicking on the full-screen button shown in this (native) element causes the other divs to be invisible.

Hopes this makes things clearer.

Solution

My question is: What is the difference in between the behavior of programmatically triggering full-screen vs. clicking on the video player button?

...As stated, clicking on the full-screen button shown in this (native) element causes the other divs to be invisible.

This is because requesting fullscreen applies to the specific element that does the requesting. Even an HTML <button> alone can be fullscreen. See the MDN docs for more info about the topic.

Other content is not visible because they are not in fullscreen.
The solution is to fullscreen some container div, then all the div content (or children) are also put into fullscreen mode at once. Think about how a Youtube page's content (logo, comments, thumbnails) disappear when you click the fullscreen button. They're on a layer underneath and re-appear when you exit fullscreen.

Alternatively, is there a way to instruct the media player to hide the full-screen button?

You can try using CSS <style> to hide a specific media player button.
note: Firefox does not respond to -webkit-media-controls or even controlslist="nofullscreen".

<style>
video::-webkit-media-controls-fullscreen-button { display: none; }
</style>

A fuller example:

<!DOCTYPE html>
<html>

<style>
video::-webkit-media-controls-fullscreen-button { display: none; }
</style>

<body>
    
<div    id="Images_Clips_Container" 
        style="background-color: rgb(201, 76, 76); 
        width: 99%;
        max-width: 1400px; height: 99%;position: absolute;text-align: center;"
>
<video id="myVideo" width="320" controls>
<source src="movie.mp4" type="video/mp4">
</video>

<br><br> <button id="myBtn">Enter: FullScreen mode</button>

</div>

<script>

const container = document.getElementById("Images_Clips_Container");
const vid = document.getElementById("myVideo");
const btn = document.getElementById("myBtn");

window.addEventListener('fullscreenchange', on_FS_Change, false);
btn.addEventListener("click", handle_FS_Request);

function handle_FS_Request(evt) 
{
    //# note:   
    //# "function on_FS_Change(evt)" is automatically triggered
    //# each time when using either "request" or "exit" fullscreen mode.  
    
    //# IF is already in Fullscreen mode (need to exit)
    if (document.fullscreenElement?.id === "Images_Clips_Container")
    {
        document.exitFullscreen();
        vid.width = 320; //set video back to normal size on page
        btn.innerText = "Enter: FullScreen mode";
    }

    //# ELSE request Fullscreen mode (need to enter)
    else 
    {
        container.requestFullscreen();
        vid.width = 960; //display video at larger size when in FS mode
        btn.innerText = "Exit: FullScreen mode";
    }
}

function on_FS_Change(evt) 
{
    //alert("Fullscreen Enter/Exit was requested by : " + evt.target.id);
    
    //if(evt.target.id == "myVideo")
    if(evt.target.id == "Images_Clips_Container") 
    { 
        //# do some container stuff here (eg: re-size or re-position HTML elements)
    }
}

</script>

</body>
</html>

Hope this helps to give you hints towards solving it.

Personally I recommend just creating your own customized player/controls to avoid browser-based issues (eg: one browser accepts the code, another denies exact same code, etc).