Skip to content

Instantly share code, notes, and snippets.

@tonycoco
Last active April 22, 2021 16:59
Show Gist options
  • Save tonycoco/384ff967979b24e59a96beb2d0dba3ae to your computer and use it in GitHub Desktop.
Save tonycoco/384ff967979b24e59a96beb2d0dba3ae to your computer and use it in GitHub Desktop.
Safari Bookmarklet for <video> Picture-In-Picture options – Copy the `bookmarket.js` snippet and paste it as the address of a bookmark in Safari. Then, while playing any <video> you can click the bookmarklet and the <video> will toggle between Picture-In-Picture and Inline.
javascript:var videos=document.getElementsByTagName("video");if(videos.length>0)for(var pipable=videos[0],i=0;i<videos.length;i++)if(!(pipable=videos[i]).paused&&pipable.webkitSupportsPresentationMode&&"function"==typeof pipable.webkitSetPresentationMode){pipable.webkitSetPresentationMode("picture-in-picture"===pipable.webkitPresentationMode?"inline":"picture-in-picture");break}
var videos = document.getElementsByTagName("video");
if (videos.length > 0) {
var pipable = videos[0];
for (var i = 0; i < videos.length; i++) {
pipable = videos[i];
if (pipable.paused) continue;
if (pipable.webkitSupportsPresentationMode && typeof pipable.webkitSetPresentationMode === "function") {
pipable.webkitSetPresentationMode(pipable.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
break;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment