javascript - Force a div to show up and overlay whatever is in fullscreen - Stack Overflow

admin管理员组

文章数量:1287621

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 bee 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 bees 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
        }
    }
});

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 bee 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 bees 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
        }
    }
});

• javascript
• jquery
• html
• css
• google-chrome

Share Improve this question Follow edited Aug 29, 2016 at 5:41 Marc asked May 7, 2014 at 1:14 MarcMarc 3,65222 gold badges2727 silver badges3737 bronze badges 5

• 1 Screenshots would be helpful if you could get them so we can understand what is going wrong. – Fizzix Commented May 7, 2014 at 1:17
• 1 As you are talking about divs, maybe is related with the property z-index? – agusgambina Commented May 7, 2014 at 1:21
• What position and display does the div have? – Fizzix Commented May 7, 2014 at 1:33
• style="z-index: 9999998; background-color: rgb(153, 102, 0);position: fixed;" – Marc Commented May 7, 2014 at 1:35
• You can fullscreen an element other than the video element and it would allow what you are looking for. For example with the mediabrowser3 fullscreen video player, I can also display the video controls as an overlay on hover. However, it looks like you are trying to overlay something over Youtube, and yeah, that likely won't work. If you cannot control how fullscreen is implemented then you are stuck with what you are given. Example: Imgur – Tim Hobbs Commented May 10, 2014 at 18:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

This is not likely to be possible. The video player fullscreen implementation takes over the entire screen; you do not have a browser window to overlay on anymore.

It's not the same as going fullscreen in your browser, where you still have the normal browser window to work with.

edit: to expand further;

With any video player using Flash, this is absolutely not possible, because you have no chance of any HTML elements to overlay onto; the fullscreen is handled by flash itself, and you can't do anything with that.

With HTML5, from my testing it also seems impossible. I went to this sample page, edited the HTML in the dev tools to try inserting a div inside the video element, but it won't render.

If you had control over the pages, it might be possible to fullscreen a container div instead of the video itself, and then achieve what you want, but since you can't control the pages in question, that likely won't help you at all (unless you wanted to try replacing IDs/etc in-page, but even that wouldn't guarantee success; if the page JS already had handles on the relevant elements, replacing IDs wouldn't update those)

Unfortunately as @Collin Grady mentioned this is not possible since the browser takes care when you play a fullscreen video.

You can still simulate full screen tho! You could modify the size of the video to adjust to the size of the screen (or whatever size you require). By doing this you still have control on your elements and can show your menu on top of the video.

There is an article in CSS Tricks that could guide you on how to modify the dimensions of a youtube video. The writer of the article wrote a jQuery plugin too called FitVids.JS

By Simulating full screen you could show what you want on top.

I hope this helps

本文标签： javascriptForce a div to show up and overlay whatever is in fullscreenStack Overflow