Text that I added to video disappears in full screen mode

Question

I edited the code given by the answer here below for my own purposes.

How to display a text on the top of Media Player on full screen?

I used jsfiddle to edit and test the code. This is my edited code: https://jsfiddle.net/uqgv8tny/

 var overlay= document.getElementById('overlay');
  var video= document.getElementById('v');
  video.addEventListener('progress', function() {
    var show= video.currentTime>=5 && video.currentTime<10;
    overlay.style.visibility= show? 'visible' : 'visible';
  }, false);

   #overlay1 {
  position: absolute; 
  top: 000px; 
  left: -110px;
  color: #00F; 
  text-align: left;
  font-size: 20px;
  width: 640px;
  padding: 10px 0;
  z-index: 2147483647;
}

 #overlay2 {
  position: absolute; 
  top: 000px; 
  left: 650px;
  color: #00F; 
  text-align: left;
  font-size: 20px;
  width: 640px;
  padding: 10px 0;
  z-index: 2147483647;
}


#v {
  z-index: 1;
}

<video id="v" controls>
    <source id='mp4'
    src="https://videos.footballia.net/uploads/video/source_file/17882/1970CheLeeRP1st.mp4"
    type='video/mp4'>
    <source id='webm'
    src="https://videos.footballia.net/uploads/video/source_file/17882/1970CheLeeRP1st.webm"
    type='video/webm'>
    <source id='ogv'
    src="https://videos.footballia.net/uploads/video/source_file/17882/1970CheLeeRP1st.ogv"
    type='video/ogg'>
    <p>Your user agent does not support the HTML5 Video element.</p>


  </video>
  <div id="overlay1">1 Bonetti<br>2 Harris<br>3 McCreadie<br>4 Hollins<br>5 Dempsey<br>6 Webb<br>7 Baldwin<br>8 Cooke<br>9 Osgood<br>10 Hutchinson<br>11 Houseman<br><br>12 Hinton </div>
  
    <div id="overlay2">1 Harvey<br>2 Madeley<br>3 Cooper<br>4 Bremner<br>5 Charlton<br>6 Hunter<br>7 Lorimer<br>8 Clarke<br>9 Jones<br>10 Giles<br>11 Gray </div>

The text is added as expected but when I put the video in full screen mode the text disappears. This problem was present in the original code and has not been caused by the edits to my code. Do I have to save the code instead of running it through jsfiddle and, if so, how do I connect the three files to each other (I used C and Fortran during my university studies but I have never used this programming language before). Or is the problem in the code itself?

Answer 1

The problem here is that when the video goes fullscreen all other HTML Elements in the page are subordinated. I suggest you take a look at the JavaScript FullScreen API @ MDN which allows you to nominate any HTML Element to toggle fullscreen.

For your purposes you'll need to wrap your <video> and overlay <div>s in a containing Element, with its CSS position property set to relative, and then make that the fullscreened Element...

/* CSS */
#container {
    position: relative;
}

<!-- HTML -->
<div id="container">
    <video id="v"> ... </video>
    <div id="overlay1"> ... </div>
    <div id="overlay"> ... </div>
</div>

Child elements of #container with absolute positions can then be CSS positioned in relation to the top-left corner of that Element.

When you're video is not fullscreen you'll probably need to define the dimensions/proportions of #container and set the <video> tag's width and height to 100%. Video tags are inline Elements so you'll also need to account for that...

#container {
    position: relative;
    width: 640px;
    height: 360px;
}
video#v {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

You're overlay Elements should pretty much work in the same way as they did before with absolute CSS positioning.

As far as JavaScript goes, it's probably a good idea to provide something 'clickable' outside your container with an Element.addEventListener to go fullscreen. You could also tie a specific keypress to do that if you prefer.

Personally I prefer the <button> for this, and for video controls, particularly as the 'fullscreen' icon that appears on most browser video Elements only fullscreens the video Element itself - which would leave you with the same problem. To avoid that I disable video-player controls and so need to provide alternatives.

I won't do the whole panoply of playback controls here but you can probably figure that out from this example and the video Element interface...

<!-- HTML -->
<button id="go_fullscreen">Go FullScreen</button>

/* JavaScript */
document.getElementById("go_fullscreen").addEventListener(
    "click", toggleFullScreen, !1
);

Of course you'll need a toggleFullScreen() function to attach that event to. Perhaps something like this, which I've taken from this page @ MDN...

function toggleFullscreen() {
    let elem = document.querySelector("#container");
    elem.onfullscreenchange = handleFullscreenChange;
    if (!document.fullscreenElement) {
        elem.requestFullscreen().then({}).catch(err => {
            alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
        });
    } else {
        document.exitFullscreen();
    }
}

function handleFullscreenChange(event) {
    let elem = event.target;
    let isFullscreen = document.fullscreenElement === elem;

    adjustMyControls(isFullscreen);
}

function adjustMyControls(bool) {
    /* if #container is fullscreen ... */
    if (bool) {
       /* ... additional overlay styling or 
          class swapping when in fullscreen */
    } else {
       /* ... revert to previous style/class etc */
    }
}

The adjustMyControls() function gives you a chance to re-style your text overlays if you need to do that - say, to change the size or position of your text. I would do this with a CSS class on the #container...

/* CSS */
#container.fullscreen video#v {
    width: 100vw;
    height: 100vh;
}
#container.fullscreen #overlay1 {
    /* ... etc ... */
}
#container.fullscreen #overlay2 {
    /* ... etc ... */
}

/* JavaScript */
...

function adjustMyControls(bool) {
    if (bool) {
        document.querySelector("video#v").classList.add("fullscreen")
    } else {
        document.querySelector("video#v").classList.remove("fullscreen")
    }
}

I think all browsers which support this feature also explicitly inform the user how to exit fullscreen mode, with the default being the Esc key, so perhaps 'toggle' is the wrong choice for the function here. Anyway...

This is by no means a complete answer. You have a little reading to do but I hope this has given you enough information to set you off in the right direction. :)