YouTube Embedded Popupper

You can pop up embeded videos by right click. (It may require permission for pop up blocker at the first pop)

当前为 2017-07-24 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name YouTube Embedded Popupper
  3. // @namespace knoa.jp
  4. // @description You can pop up embeded videos by right click. (It may require permission for pop up blocker at the first pop)
  5. // @description:ja YouTubeの埋め込み動画を、右クリックからポップアップで開けるようにします。(初回のみポップアップブロックの許可が必要かもしれません)
  6. // @include https://www.youtube.com/embed/*
  7. // @include https://www.youtube-nocookie.com/embed/*
  8. // @version 2.0
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12. (function (){
  13. const SCRIPTNAME = 'YouTubeEmbeddedPopupper';
  14. const DEBUG = false;
  15. console.time(SCRIPTNAME);
  16. const POPUPWIDTH = 640;/*width of popup window*/
  17. const READYDURATION = '2.5s';/*for ready animation*/
  18. const POPUPTITLE = 'Right Click to Popup';/*shown on mouse hover*/
  19. const PARAMS = [/* Overwrite parameters */
  20. 'autoplay=1',/*autoplay*/
  21. 'controls=2',/*show controls*/
  22. 'disablekb=0',/*enable keyboard control*/
  23. 'fs=1',/*enable fullscreen*/
  24. 'rel=0',/*not to show relative videos*/
  25. 'popped=1',/*(original)prevent grandchild popup*/
  26. ];
  27. let core = {
  28. initialize: function(){
  29. /* Prevent grandchild popup and enables shortcut keys on popupped window */
  30. if(location.href.includes('popped=1')) return setTimeout(function(){document.querySelector('video').focus();}, 100);
  31. /* Ready indicators */
  32. window.addEventListener('load', core.showReadyAnimation, true);
  33. document.body.title = POPUPTITLE;
  34. /* Right Click to Popup */
  35. document.body.addEventListener('contextmenu', function(e){
  36. /* Define elements */
  37. let player = document.querySelector('.html5-video-player');
  38. let time = document.querySelector('.ytp-progress-bar');
  39. /* Stop playing */
  40. if(player.classList.contains('playing-mode')) player.click();
  41. /* Get current time */
  42. let t = time.attributes['aria-valuetext'].textContent.split('/')[0].split(':').map(t => parseInt(t)).reverse();
  43. let start = 0;
  44. switch(t.length){
  45. case(3):
  46. start += t[2]*60*60;
  47. case(2):
  48. start += t[1]*60;
  49. case(1):
  50. start += t[0];
  51. }
  52. let params = PARAMS.concat('start=' + start);/*use params at local scope*/
  53. /* Build URL */
  54. /* (Duplicated params are overwritten by former) */
  55. let l = location.href.split('?');
  56. let url = l[0] + '?' + params.join('&');
  57. if(l.length === 2) url += ('&' + l[1]);
  58. /* Open popup window */
  59. /* (Use URL for window name to prevent popupping the same videos) */
  60. window.open(url, location.href, [
  61. 'width=' + POPUPWIDTH,
  62. 'height=' + (POPUPWIDTH / document.body.offsetWidth) * document.body.offsetHeight,
  63. ].join(','));
  64. e.preventDefault();
  65. e.stopPropagation();
  66. }, {capture: true});
  67. },
  68. showReadyAnimation: function(e){
  69. let ready = document.createElement('div');
  70. ready.style.position = 'absolute';
  71. ready.style.margin = 'auto';
  72. ready.style.top = ready.style.bottom = '0';
  73. ready.style.left = '50%';
  74. ready.style.width = ready.style.height = '0px';
  75. ready.style.borderRadius = '0px';
  76. ready.style.background = 'rgba(255,255,255,1.0)';
  77. ready.style.transitionDuration = READYDURATION;
  78. ready.addEventListener('transitionend', function(){
  79. document.body.removeChild(ready);
  80. });
  81. document.body.appendChild(ready);
  82. requestAnimationFrame(function(){
  83. let size = Math.hypot(document.body.clientWidth, document.body.clientHeight);
  84. ready.style.width = ready.style.height = size + 'px';
  85. ready.style.left = 'calc(50% - ' + size + 'px / 2)';
  86. ready.style.borderRadius = size + 'px';
  87. ready.style.background = 'rgba(255,255,255,0.0)'
  88. });
  89. },
  90. };
  91. let log = (DEBUG) ? console.log.bind(null, SCRIPTNAME + ':') : function(){};
  92. core.initialize();
  93. console.timeEnd(SCRIPTNAME);
  94. })();

QingJ © 2025

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