Media Overlay Plugin

(David Taylor) #1

Continuing the discussion from "Picture in Picture" with oneboxes?:

Discourse Media Overlay Plugin

This plugin allows users to “pop out” media into a floating window while they browse the site. They can even navigate to a different topic and the media will continue working.

It works with any <iframe> or <video> (with some special treatment for lazyYT). It adds a button to every compatible thing, which then opens a little popup in the bottom right.

You can then “minimise” it, which keeps the audio going in the background, or completely close it.

At the moment the size of the video is decided by the original embed. I’d like to add a “resizing” feature, either a “click and drag”, or just simply 3 buttons “small”, “medium”, “large”.

Currently this obscures the composer… simple solution is to just close the popup if you want to write a post :wink:

Media Overlay component
Increase the post cloaking threashold, or check first if media is playing before cloaking a post on scroll
Help us to test the HTML pasting
"Picture in Picture" with oneboxes?
(Vincent) #2

Word up @David_Taylor :ok_hand:

I’m currently rebuilding and will provide feedback regarding any bugs or suggestions I might get from my community.

(David Taylor) #3

To bring this discussion into the plugin thread:

If anyone has any suggestions of a better UI for the ‘popup’ button, I’d really like to change it!

(Vincent) #4

What about an inline button that juste fades out after a short while when you hover oneboxes?

By the way, is it possible to remove the media player titlebar and replace it with similar hovering minimize and close buttons?

I would also like to be able to chose the media player location so it doesn’t override any other element.

That would be all :smiley:

(David Taylor) #5

Hover-based buttons could work for desktop, but anything with a touch screen would still need to show the buttons all the time.

Do you mean change the position as an admin-controlled site setting? Or allow users to move it around? An easy-ish solution would be a button that allows the user to move it between the bottom left and the bottom right.

(Vincent) #6

I’d go for an admin-based choice, but that’s just my opinion.

Maybe hovering buttons, even for desktop only, might still be a good solution? Mobile users would still see the button.

(David Taylor) #7

Have added hover animations (desktop only), and there’s now a button to switch from left to right (and a default configurable in the admin panel).

(Vincent) #8

Hey @David_Taylor! Any news regarding your plugin?

It kind of broke with Discourse updates. Have a look at a multiple-onebox post on my forum:

(David Taylor) #9

Thanks for reporting. I’ve just pushed an update, so please update the plugin and let me know if it still doesn’t work properly :slight_smile:

(Vincent) #10

Just rebuilt. It works great! Thank you a lot for your prompt response.

I was wondering: would it be possible to auto-open oneboxes in the media player? Maybe with something like a clickable “fake first layer” instead of the hovering icon?

Throwing ideas here :slight_smile:

(Vincent) #11


Is there any way to make the media overlay button compatible with this YouTube player CSS hack?

It seems to be hidden in the background:

(cc @lll)

Media Overlay component
(David Taylor) #12

It should be possible to fix this with CSS, I will have a look tomorrow.

I will also see about converting this to a theme component, as there’s no reason for it to be a plugin now.

(Joe) #13

I know very little about this awesome plugin so I may be off by a large margin here.

I still see the button on Chrome. However, on Firefox and IE it’s not there.
I think this occurs because Chrome registers as a “touch enabled” browser. (modernizer?)

So the class touch gets added to the html tag. On the other two browsers I see a no-touch class on the html tag.

On those browsers the following CSS is taking affect:

.no-touch .media-overlay-eligable .control {
    opacity: 0;
    transition: 0.5s opacity;
    position: absolute;
    right: 0;
    top: 0;

So the button has opacity: 0 and has an absolutely positioned so it’s transparent and falls being the player.

I’m tempted to say try this:

.no-touch .media-overlay-eligable .control {
    opacity: 1;
    position: relative;

As it seems to do the trick for me.

but given how little I know about the rest of the plugin I would advise caution as it may end up causing other issues elsewhere.

(David Taylor) #14

This plugin is now obsolete, if you install it you will get a warning in your admin panel asking you to uninstall it.

Please install the theme component instead, it has all the same functionality:

(Erlend Sogge Heggen) #15