UserScript: Toggle picture-in-picture (ctrl+p) and fullscreen (ctrl+f) in Safari. Tested with -> https://apps.apple.com/us/app/userscripts/id1463298887

toggle-pip-safari-shortcut.js

// ==UserScript==
// @name        Toggle pip and fullscreen on any video
// @description Toggle picture-in-picture (ctrl+p) and fullscreen (ctrl+f) in Safari
// @license     MIT
// @author      Daniel Rotärmel
// @namespace   https://gist.github.com/danielrotaermel
// @match       *://*.*
// @match       *://*/*
// ==/UserScript==

document.onkeyup = function(e) {
  if (e.ctrlKey && e.key == "p") togglePip()
  if (e.ctrlKey && e.key == "f") toggleFullscreen()
};

function togglePip() {
  const element = document.querySelector('video')
  if (!element) return
  const isNotPip = element.webkitPresentationMode === 'inline' || element.webkitPresentationMode === 'fullscreen'
  element.webkitSetPresentationMode(isNotPip ? 'picture-in-picture' : 'inline')
}

function toggleFullscreen() {
  const element = document.querySelector('video')
  if (!element) return
  const isNotFullScreen = element.webkitPresentationMode === 'inline' || element.webkitPresentationMode === 'picture-in-picture'
  element.webkitSetPresentationMode(isNotFullScreen ? 'fullscreen' : 'inline')
}

Hey, you can simplify the script to the following:

document.onkeyup = (event) => {
  if (event.ctrlKey && event.key == 'p') {
    const element = document.querySelector('video')

    if (element) {
      element.webkitSetPresentationMode(element.webkitPresentationMode === 'inline' ? 'picture-in-picture' : 'inline')
    }
  }
}

Thanks for making this script! I modified it to add a toggle for fullscreen by pressing F and added floating buttons for iPhones and iPads.

function setButtonStyle(button) {
	button.style.position = 'fixed'
	button.style.bottom = '5%'
	button.style.zIndex = '10'
	button.style.width = '5em'
	button.style.height = '5em'
	button.style.backgroundColor = 'rgb(135 206 235 / 50%)'
	button.style.borderRadius = '10%'
}

function togglePiP() {
	const element = document.querySelector('video')

	if (element) {
		element.webkitSetPresentationMode(element.webkitPresentationMode === 'inline' ? 'picture-in-picture' : 'inline')
	}
}

function toggleFullscreen() {
	const element = document.querySelector('video')

	if (element) {
		element.webkitSetPresentationMode(element.webkitPresentationMode === 'inline' ? 'fullscreen' : 'inline')
	}
}

document.onkeyup = (event) => {
	if (event.key === 'p') {
		togglePiP()
	} else if (event.key === 'f') {
		toggleFullscreen()
	}
}

// Is touchscreen device
if (navigator.maxTouchPoints > 0) {
	let pipButton = document.createElement('button')
	let fullscreenButton = document.createElement("button")
	pipButton.id = 'pipButton'
	fullscreenButton.id = 'fullscreenButton'
	setButtonStyle(pipButton)
	setButtonStyle(fullscreenButton)
	pipButton.innerHTML = '🖼️'
	pipButton.style.right = '4%'
	fullscreenButton.innerHTML = '📺'
	fullscreenButton.style.right = '16%'
	document.body.appendChild(pipButton)
	document.body.appendChild(fullscreenButton)
	pipButton.onclick = (event) => {
		togglePiP()
	}
	fullscreenButton.onclick = (event) => {
		toggleFullscreen()
	}
}

Thanks for the great suggestions @ILikePlayingGames & @yurkimus. I’ve added the fullscreen toggle by default. The touchscreen buttons are a nice addition too, though I’m not using them personally. For anyone interested, this snippet should work with the userscript. Just append it to the script to add the buttons:

function setButtonStyle(button) {
	button.style.position = 'fixed'
	button.style.bottom = '5%'
	button.style.zIndex = '10'
	button.style.width = '5em'
	button.style.height = '5em'
	button.style.backgroundColor = 'rgb(135 206 235 / 50%)'
	button.style.borderRadius = '10%'
}

const isTouchscreenDevice = navigator.maxTouchPoints > 0
if (isTouchscreenDevice) {
	let pipButton = document.createElement('button')
	let fullscreenButton = document.createElement("button")
	pipButton.id = 'pipButton'
	fullscreenButton.id = 'fullscreenButton'
	setButtonStyle(pipButton)
	setButtonStyle(fullscreenButton)
	pipButton.innerHTML = '🖼️'
	pipButton.style.right = '4%'
	fullscreenButton.innerHTML = '📺'
	fullscreenButton.style.right = '16%'
	document.body.appendChild(pipButton)
	document.body.appendChild(fullscreenButton)
	pipButton.onclick = (event) => togglePip()
	fullscreenButton.onclick = (event) => toggleFullscreen()
}