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.