It is a theoretical doubt. I have an inherited application, which among other things shows a video about an iframe of vimeo. And on the video are showing questions and buttons for the answer in the bottom by a div. All this works well while the video is NOT full screen. My question is if you can superimpose html elements over a full screen video, in which DOM element the video is played ??
I appreciate any kind of guidance, I've been researching for a while but zero valid results.
Instead of asking for the full screen for a video, ask for the video container.
I'll give you an example below, but for some reason it does not end up working on the SOes website, so here you have the same code working in codepen
const container=document.getElementById('container');
const button=document.getElementById('full');
button.addEventListener('click', () => {
container.webkitRequestFullscreen();
});div {
position: relative;
width:400px;
}
#container {
width: 100%;
}
video {
position: relative;
width: 100%;
}
span {
position: absolute;
top: 50%;
left: 40%;
background-color: #0000FF99;
z-index: 50;
}<div>
<div id="container">
<span>TEXTO</span>
<video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" />
</div>
</div>
<button id="full">Click</button>