YouTube.com add PIP picture in picture pop-out button (Mobile / Desktop)

Adds a pop out to PIP button below the video. Works on mobile, tablet (m.youtube.com) and on desktop.

  1. // ==UserScript==
  2. // @name YouTube.com add PIP picture in picture pop-out button (Mobile / Desktop)
  3. // @namespace m-youtube-com-pip-button
  4. // @version 1.4
  5. // @description Adds a pop out to PIP button below the video. Works on mobile, tablet (m.youtube.com) and on desktop.
  6. // @author hlorand.hu
  7. // @match https://m.youtube.com/*
  8. // @match https://youtube.com/*
  9. // @match https://*.youtube.com/*
  10. // @icon https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
  11. // @grant none
  12. // @license https://creativecommons.org/licenses/by-nc-sa/4.0/
  13. // ==/UserScript==
  14.  
  15.  
  16. (function() {
  17. //'use strict';
  18. function addbutton(){
  19. document.getElementById("pipbutton").innerText = "";
  20.  
  21. let button = document.createElement('button');
  22. button.textContent = "PIP";
  23. button.className = "pipbutton";
  24.  
  25. button.style.margin = "4px";
  26. button.style.padding = "6px";
  27.  
  28. button.style.backgroundColor = "brown";
  29. button.style.position = "relative";
  30.  
  31. button.onclick = function() {
  32. let video = document.querySelector("video");
  33. video.disablePictureInPicture = false;
  34. video.requestPictureInPicture();
  35. };
  36.  
  37. let target = document.getElementById("pipbutton");
  38. target.insertBefore(button, target.firstChild);
  39.  
  40.  
  41. } // end addbuttons
  42.  
  43. // Periodically check if the buttons are visible
  44. // (sometimes YouTube redraws its interface).
  45. setInterval(()=>{
  46. // Creating a div that will contain buttons.
  47. if( document.getElementById("pipbutton") == undefined ){
  48. // placement of buttons on desktop
  49. let parent = document.getElementById('above-the-fold');
  50.  
  51. // placement of buttons on tablet
  52. if( !parent ){
  53. parent = document.querySelector('.watch-below-the-player');
  54. }
  55.  
  56. // placement of buttons on mobile
  57. if( !parent ){
  58. parent = document.querySelector('.related-chips-slot-wrapper');
  59. }
  60.  
  61. let wrapper = document.createElement('div');
  62. wrapper.setAttribute("id","pipbutton");
  63. parent.insertBefore(wrapper, parent.firstChild);
  64. addbutton();
  65.  
  66. }
  67.  
  68. // Sometimes the buttons are not added, so I check and add them if necessary.
  69. if( document.getElementById("qualitybuttons") === undefined ){
  70. addbutton();
  71. }
  72.  
  73. }, 1000);
  74.  
  75. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址