Extension not working with Google Drive's new media player

[omerfarukatas]

This is my favorite extension, it completely changed how I interact with videos online. However, Google just updated its Drive's media player so the extension doesn't work there anymore. Neither the keyboard shortcuts nor the little interface on the video is functional. The interface is visible but not clickable. Do you think you can fix this? Thanks in advance!

[Ferd1999]

Seconding everything that was said here!!! ^^^

[galfriend123]

Yes please help fix this!

[Anu-vibes]

please please please quick.

[patkujawa-wf]

There's a new <section> in the DOM that's on top of everything else and obscuring focus/clicking of the extension. You can inspect the DOM and remove this section to access the controls, but that's clearly not ideal.

I see there's site-specific CSS like

videospeed/inject.css

Lines 80 to 81 in d785686

	.ytp-fullscreen .ytp-webgl-spherical-control {
	top: 100px !important;

and found that shifting this new overlay top: 100px is enough for the controls to be usable. But then the overlay of controls is almost shifted off the viewport, which isn't great. It'd be nicer to just have the extension controls be on top.

Actually, looks like site-specific logic for picking the parent in the DOM would be the right place to make this show up on top of the new overlay:

videospeed/inject.js

Lines 353 to 379 in d785686

	switch (true) {
	// Only special-case Prime Video, not product-page videos (which use
	// "vjs-tech"), otherwise the overlay disappears in fullscreen mode
	case location.hostname == "www.amazon.com" && !this.video.classList.contains("vjs-tech"):
	case location.hostname == "www.reddit.com":
	case /hbogo\./.test(location.hostname):
	// insert before parent to bypass overlay
	this.parent.parentElement.insertBefore(fragment, this.parent);
	break;
	case location.hostname == "www.facebook.com":
	// this is a monstrosity but new FB design does not have *any*
	// semantic handles for us to traverse the tree, and deep nesting
	// that we need to bubble up from to get controller to stack correctly
	let p = this.parent.parentElement.parentElement.parentElement
	.parentElement.parentElement.parentElement.parentElement;
	p.insertBefore(fragment, p.firstChild);
	break;
	case location.hostname == "tv.apple.com":
	// insert before parent to bypass overlay
	this.parent.parentNode.insertBefore(fragment, this.parent.parentNode.firstChild);
	break;
	default:
	// Note: when triggered via a MutationRecord, it's possible that the
	// target is not the immediate parent. This appends the controller as
	// the first element of the target, which may not be the parent.
	this.parent.insertBefore(fragment, this.parent.firstChild);
	}

I looked into adding something there but turns out it's harder than I thought because the video is in an iframe, so document is actually the iframe root, and I'm not sure how to access the page hosting the iframe in order to insert the player controls as a sibling to the iframe (or if that's even really how to go about fixing this).

      case location.ancestorOrigins.contains('https://drive.google.com'):
        // insert before parent to bypass overlay
        // TODO insert as a sibling to the iframe hosting the video (this doesn't work)
        document.documentElement.parentNode.insertBefore(fragment, document.documentElement.parentNode);
        break;

[Mohammad1427]

please fix
this new drive update is driving me insane
drive was totally fine without it