Disable Opera's HTML video pop-out button

Question

In Opera (and only Opera), a HTML5 video comes with a button at the top which allows you to pop the video out of the webpage.

Is there a way to disable this in javascript, jquery or CSS?

Here is a similar post, but doesn't explain how to disable it without user intervention, I need something programmatic:

HTML5 Video button on top - Opera Browser

Dispirited

A CSS solution would be best, imho, – Findley

Yep, ok I'll add that to the list of methods in the question. I don't actually care too much of the mechanism/language, I just want to get rid of it! :) – Dispirited

It's a browser feature. You hardly can suppress it from the page. Why would you? – Sonometer

There are loads of reasons to want to suppress a feature which occurs in just 1/7 major browsers. Starting with consistency for the user experience, particularly on paid for services and video-centric developements. – Dispirited

Answer 1

// Hide Opera detach video popup button
// May remove other useful browser popups, inserted after "body" element.
html > div[style] {
  display: none !important;
}

Genus

Answer 2

Found this when testing opera with a site I'm working. Hated it immediately.

Here's some css to hide it:

body + div[is-visible] {
  display: none !important;
}

Edit: Some more details.

Firstly, this is was done with reference to Opera 39 on desktop. Other versions may be slightly different but hopefully this has enough information that someone else can help come up with a solution that works in them too.

I found the button is attached to the document in a div at the bottom of the page (directly after the body element). You can see it in the browser using the page inspector.

The button itself seems to be part of the DOM so there's no way to apply css to it directly, so I've had to get about that by hiding it's container (the div).

The is-visible attribute is only really there to keep from confusing it with other elements. Best I can tell that attribute is only used in Opera.

Scapegoat

It should just work to throw it into a stylsheet at the start of the document, unless Opera's done something really weird and moved the element around. I'll added some more details so maybe one can figure out their own solution. – Scapegoat

In mine it's at the top of the page – Dispirited

Seems Opera is the antichrist. Does it appear alongside the body tag in the html tag? In that case you may be able to change "body +" to "html >". – Scapegoat

"is-visible" removed. "body + div {" does the job – Mahone

Answer 3

This does the trick for me:

#detach-button-host {
    display: none !important;
}

I know this question was asked years ago but I think that my solution is better than the other approaches.

Roderich

Answer 4

As of Opera 56, the button is added to a separate shadow DOM meaning there is no way to disable it via CSS or JS.

The button is not added for videos shorter than 15 seconds, so making the video shorter could be a solution in some cases.

Dionysus

Answer 5

Opera create a div inside tag and a child in shadow down as idmadj said, but I`ve managed a way to solve with this CSS:

html>div{
    display: none;
}

Cornhusk

Answer 6

You can hide it with CSS

html > div {
  display: none !important;
}

Quanta

Answer 7

go to settings, search video pop out, disable it

Earley

This only works if you have access to all users' PC and update browser settings one-by-one. This is likely not what OP was looking for, btw, 5 years ago. – Ecdysis