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.

[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/)

[Komposten]

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

[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

[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.

[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.