Picture-in-Picture on Twitch

[Komposten]

Is PiP supposed to work on Twitch? My brother used it for Twitch way back when it was still a snapshot-only feature, but I've never managed to get the option to show up and nowadays he can't get it to work either.

Twitch is probably the platform where I would find this feature the most useful.

[Gwen-Dragon]

PiP does work only on real HTML5 videos.
Twitch and some other website uses special video player/streaming where the PiP feature can not be used.
Please read https://forum.vivaldi.net/topic/33065/possible-bug-with-pip-in-w7 and install a extension.

[Guilimote]

Or just create a bookmark with the following url:
javascript:document.querySelector('div.player-video video').requestPictureInPicture();void(0);

Then, when on the relevant Twitch page, just open this bookmark

(inspired from https://www.reddit.com/r/Twitch/comments/9ar32h/pictureinpicture_chrome/)

[Gwen-Dragon]

@Guilimote Oh, yes! I'll give you for this tip.
That bookmarklet works!

[Komposten]

Hmm, I thought Twitch switched over to an HTML5 player a while ago.
Anyway, thanks for the tips!

[Gwen-Dragon]

@Guilimote Please, see i added your fix/hint at https://forum.vivaldi.net/topic/2575/tips-tricks/42

[Guilimote]

@Komposten Yeah it is a HTML5 player, but not in the native way the browser is expecting it.
They have kind of a proprietary layer to manage the chat or their specific features.

@Gwen-Dragon haha you're welcome

[Gwen-Dragon]

@Komposten No, the player does not generate HTML5 code, that causes the failing detection for PiP.

Same issue on Chromium and Chrome.

[Komposten]

I used @Guilimote's reddit user Smaxx' little JS snippet and added a PiP button to the Twitch interface (using an "inject javascript" extension that I already had installed, called Custom JavaScript for websites).

Screenshot:

Code:

//Wait for the player overlay to load, then add the pip button.
waitForOverlay();

function waitForOverlay() {
	if (!createPipButton()) {
		setTimeout(waitForOverlay, 300);
	}
}


function createPipButton() {
	if (document.querySelector("#pip-button")) {
		return true;
	}
	
	let buttons = document.querySelector('div.player-buttons-right');
	
	if (buttons) {
		let theatre = document.querySelector("button.qa-theatre-mode-button");
		if (theatre) {
			//Copy the theatre-mode button.
			let pip = theatre.cloneNode(true);
			pip.classList.remove("qa-theatre-mode-button");
			pip.id = "pip-button";
			
			//Set the button to activate PiP on click.
			pip.setAttribute("onClick", "document.querySelector('div.player-video video').requestPictureInPicture()");
			pip.querySelector(".player-tip").setAttribute("data-tip", "Picture-in-Picture");
			
			//Change the icon.
			pip.querySelector("#icon_theatre").id = "icon_pip";
			pip.querySelector("#icon_pip path").setAttribute("d", "M23 8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h16zm-6 12h5v-5h-5v5zM8 20h14V10H8v10z");
			
			//Insert the button.
			buttons.insertBefore(pip, theatre);
			
			return true;
		}
	}
	
	return false;
}

// Re-add the pip button (if needed) after the user navigates.
// Needed since Twitch doesn't reload the page.
var titleObserver = new MutationObserver(waitForOverlay);
titleObserver.observe(document.querySelector("title"), { childList: true, characterData: true });

[Guilimote]

@Komposten The code is not even from me, I found it in the link of my 1st post But wow, your tweak seems to be GREAT!

[Komposten]

@Guilimote Fair enough, credit for the original JS snippet goes to Smaxx on reddit, then.

[Gwen-Dragon]

@Komposten I added in thread Show Picture-in-Picture on TwitchTV link to Smaxx on reddit.

[ukanuk]

I noticed the Picture-in-Picture button for video is not available on Facebook, either. (At least not on the new Beta interface on Facebook Live videos being watched after the fact, i.e. no longer live). Presumably it's the same problem, where Facebook is not actually using an HTML5 player.