2
0 Comments

I have a Chrome extension that inserts a menu into the page, but whenever any flash or html5 video player goes full screen, anything outside of the video player is invisible.

Could I have two objects in full screen at the same time (one over the other), or is there another way to do this? I would rather not have to insert the html specifically into different places on different websites, because of the large variety of existing video players. The solution should be universal for all video players.

EDIT:

Since then, a lot of the web has moved to using html5 instead of flash, so this has become a very possible thing to do on almost all websites.

Here was the code I ended up writing and using. Hopefully this will help someone:

document.addEventListener("webkitfullscreenchange", function(){//Whenever an element becomes or stops being in full screen
    //first, grab the page's fullscreenElement
    var fse = document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;

    if(fse){//if there is a fullscreened element
        fse.appendChild(menu);//append the menu inside the fullscreened element
    }else{//if nothing is in full screen
        if(window.self !== window.top){//if we are in an iframe
            menu.remove();//hide menu if we are in an iframe
        }else{//if we arn't in an iframe
            document.body.insertBefore(menu, document.body.firstChild);//show menu
        }
    }
});