CODEWITHSUNDEEP
javascriptyoutube
teg_brightly
teg_brightly

Reputation: 528

Disabling YouTube's drag down for miniplayer functionality

If I watch a YouTube video and try to drag the player down, it's doing this: enter image description here

Sometimes it doesn't do this. Sometimes it's only doing this in fullscreen. Sometimes it's also doing this in theatre mode. It started happening not so long ago.

I've tried document.addEventListener('mousemove', (e) => { e.stopImmediatePropagation(); e.stopPropagation(); e.preventDefault();}, true) in Tampermonkey, but it disables all the other mousemoves except the drag down for miniplayer. I've tried user-select: none, but it doesn't solve this issue either.

I've tried in Incognito mode, with extensions disabled. Nothing helped.

I'm running latest Chrome. 95.0.4638.54

This doesn't happen in Chromium for some reason: version 94.0.4606.81

I'm not the only one with this problem: https://www.reddit.com/r/youtube/comments/l4falt/is_there_a_way_to_turn_off_the_drag_down_to/

I haven't found any other forum posts about it.

Is there any way to disable this functionality?

Update: this code seems to work: https://pastebin.com/n093g9Ur

Upvotes: 2

Views: 877

Answers (1)

teg_brightly
teg_brightly

Reputation: 528

It was a bit difficult, but to solve this problem:

  1. First it was necessary to find the element which listens to user events which trigger this behaviour, by using Ctrl-Shift-C on YouTube player's element and then adding "pointer-events: 'none'" to its parent elements' CSS, until it disables this functionality.
  2. The element that was listening for the events can be selected with document.querySelector('ytd-page-manager #player-container'); (it turns out there are multiple elements with player-container id on YouTube).
  3. Then we get event listeners for this element by typing "getEventListeners(temp1)" in Chrome developer console (where temp1 is the 'ytd-page-manager #player-container' element after right clicking and choosing "store as a global variable")
  4. Then we add our own event listener with Capture:true and stop immediate propagation for these events (it was enough to do for the "pointerdown" event)

So after the page has loaded the code would be

const container = document.querySelector('ytd-page-manager #player-container');
console.log(container)
container.addEventListener('pointerdown', (e) => {
    console.log(e.currentTarget);
    e.stopImmediatePropagation();
}, true)

We add "true" to the event listener to use Capture ("A boolean value indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree" -- https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).

Upvotes: 2

Related Questions