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.

当前为 2025-01-01 提交的版本,查看 最新版本

  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.3
  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.requestPictureInPicture();
  34. };
  35.  
  36. let target = document.getElementById("pipbutton");
  37. target.insertBefore(button, target.firstChild);
  38.  
  39.  
  40. } // end addbuttons
  41.  
  42. // Periodically check if the buttons are visible
  43. // (sometimes YouTube redraws its interface).
  44. setInterval(()=>{
  45. // Creating a div that will contain buttons.
  46. if( document.getElementById("pipbutton") == undefined ){
  47. // placement of buttons on desktop
  48. let parent = document.getElementById('above-the-fold');
  49.  
  50. // placement of buttons on tablet
  51. if( !parent ){
  52. parent = document.querySelector('.watch-below-the-player');
  53. }
  54.  
  55. // placement of buttons on mobile
  56. if( !parent ){
  57. parent = document.querySelector('.related-chips-slot-wrapper');
  58. }
  59.  
  60. let wrapper = document.createElement('div');
  61. wrapper.setAttribute("id","pipbutton");
  62. parent.insertBefore(wrapper, parent.firstChild);
  63. addbutton();
  64.  
  65. }
  66.  
  67. // Sometimes the buttons are not added, so I check and add them if necessary.
  68. if( document.getElementById("qualitybuttons").textContent.trim() === '' ){
  69. addbuttons();
  70. }
  71.  
  72. }, 1000);
  73.  
  74. })();