Overlay HTML on Fullscreen Video

NB: this is just for keeping track on the progress (if any) on the ability to place HTML content on top of fullscreen video

This question popped-up on my research project with Alexander Gaipo‘s Masters thesis regarding our project on First Screen eXperience (FSX). FSX, allowed web-cast presenters to engage users by sending them predefined annotations with links, text and images. However, we ran into an issue where when the user views the video in fullscreen, all that content was removed since the video is essentially in a new window layer above the HTML rendered space.

Some useful links:


  • I noticed to overlay html elements, as long as the elements were siblings to the <video> element I was able to control the z-index and overlay text above it