Specifically, I am using video.js to implement video into a website. The video has JS CSS triggers that bring up overlay div elements at certain times in the video (like YouTube annotations)
When in full screen mode, however, these elements will not show up. I would like to try and solve this, but I do not even know how fullscreen mode works or how I could make sure that the elements inside the video properly scale when in full screen mode.
Full screen in HTML5 is a mode where a browser places an element, and all the elements that it contains, into a special full screen mode where it has special permission to render over the browser's chrome and do a few other things like handle keyboard input.
There's nothing special happening here. You can use the normal Chrome debug tools to watch how full screen mode behaves, and this is how I'd recommend investigating the internals of how full screen works.
But for your specific problem, where your text isn't showing up in full screen mode, the solution is, instead of requesting full screen on the video element, instead request full screen mode on a div that contains your video player as well as your overlay elements. That way the captions are included in the full screen request.
You can also try manipulating the z-index of the elements your captions are in, but according to this answer, this is not the preferred solution, as it is expected to stop working someday.
