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

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

• javascript
• jquery
• html
• opera

• A CSS solution would be best, imho, – Laust Deleuran Commented Aug 22, 2016 at 23:44
• 1 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! :) – Single Entity Commented Aug 23, 2016 at 7:28
• 1 It's a browser feature. You hardly can suppress it from the page. Why would you? – Bergi Commented Aug 23, 2016 at 10:19
• 2 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. – Single Entity Commented Aug 23, 2016 at 10:22

7 Answers 7

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

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.

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.

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.

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;
}

You can hide it with CSS

html > div {
  display: none !important;
}

go to settings, search video pop out, disable it