CODEWITHSUNDEEP
javascripthtmlgoogle-chromegoogle-chrome-extension
Giedrius
Giedrius

Reputation: 1390

Chrome Extension - Show custom notification/popup (HTML element) on top of a fullscreen video

I want to write an extension for Chrome (as seems the easiest option) that would show notifications on top of a full screen video.

For example, say you're watching a Netflix video, the chrome recognises what video you're watching, checks databases for popups, and if it found some, it shows them at specific times (say when video is at 1:05 or something).

While most of the parts seem doable, main question is, how to display some HTML element on top of a video that is in full-screen mode?

Thanks a lot!

Edit

After some research and links provided by the answer, I could not find an answer for Flash players - I guess that is not (easily) possible. However, as per my example, I tested Netflix videos, and whether it's fullscreen or not, a simple div with absolute positioning and high value for z-index was visible at all times. As many of the systems are now are or moving onto HTML5 video's, the simple solution should apply to all of them. Thanks Marc Guiselin for helping.

Upvotes: 2

Views: 860

Answers (1)

Marc
Marc

Reputation: 3652

I asked this a while back for my extension: Force a div to show up and overlay whatever is in fullscreen

The result was this: you can't on things like flash, however, I found out you can detect if an html element is in fullscreen in your content script using document.fullscreenElement||document.webkitFullscreenElement.

If it's null, nothing is in full screen, but if isn't, then you can append stuff to it while its in fullscreen.

Also if you want to do this, you might want to allow your content scripts to work within iframes using "all_frames": true in your manifest, since a lot of sites now use embeded iframe html5 players that can go full screen.

Good luck.

Upvotes: 2

Related Questions