HTML5 Detect Entering Fullscreen

Issue

I cannot seem to figure out how to bring an element into the fullscreen mode upon video entering the fullscreen mode. I tried looking through the various materials available but still the answer eludes me. This is what I have so far:

 document.getElementById("videoid").addEventListener("mozfullscreenchange", function () {
 document.getElementById("imageid").mozRequestFullScreen(); 
 }, false);

The code is for Firefox but I assume other browsers would have similar behavior only the prefix will have to be switched from "moz" to "webkit".

Solution

As said in comments, there can't be two fullscreen elements at once. This code should work:

document.getElementById("videoid").addEventListener("mozfullscreenchange", function () {
 if(document.mozfullScreen){
  document.mozCancelFullScreen();
  document.getElementById("imageid").mozRequestFullScreen();
 }
}, false);

Answered By - m93a