6

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

Improve this question
4
  • 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

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

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.

Improve this answer
4
  • 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.
    – Sollace
    Commented Sep 15, 2016 at 18:26
  • In mine it's at the top of the page
    – Single Entity
    Commented Sep 15, 2016 at 18:49
  • 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 >".
    – Sollace
    Commented Sep 17, 2016 at 8:12
  • "is-visible" removed. "body + div {" does the job
    – Kareem
    Commented Feb 24, 2019 at 6:25
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.

Improve this answer
0

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.

Improve this answer
0

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;
}
Improve this answer
0

You can hide it with CSS

html > div {
  display: none !important;
}
Improve this answer
-1

go to settings, search video pop out, disable it

Improve this answer
1
  • 1
    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.
    – HardcoreGamer
    Commented Aug 20, 2021 at 8:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.