You can pop up embeded videos by right click. (It may require permission for pop up blocker at the first pop)
// ==UserScript==
// @name YouTube Embedded Popupper
// @namespace knoa.jp
// @description You can pop up embeded videos by right click. (It may require permission for pop up blocker at the first pop)
// @description:ja YouTubeの埋め込み動画を、右クリックからポップアップで開けるようにします。(初回のみポップアップブロックの許可が必要かもしれません)
// @include https://www.youtube.com/embed/*
// @include https://www.youtube-nocookie.com/embed/*
// @version 2.0
// @grant none
// ==/UserScript==
(function (){
const SCRIPTNAME = 'YouTubeEmbeddedPopupper';
const DEBUG = false;
console.time(SCRIPTNAME);
const POPUPWIDTH = 640;/*width of popup window*/
const READYDURATION = '2.5s';/*for ready animation*/
const POPUPTITLE = 'Right Click to Popup';/*shown on mouse hover*/
const PARAMS = [/* Overwrite parameters */
'autoplay=1',/*autoplay*/
'controls=2',/*show controls*/
'disablekb=0',/*enable keyboard control*/
'fs=1',/*enable fullscreen*/
'rel=0',/*not to show relative videos*/
'popped=1',/*(original)prevent grandchild popup*/
];
let core = {
initialize: function(){
/* Prevent grandchild popup and enables shortcut keys on popupped window */
if(location.href.includes('popped=1')) return setTimeout(function(){document.querySelector('video').focus();}, 100);
/* Ready indicators */
window.addEventListener('load', core.showReadyAnimation, true);
document.body.title = POPUPTITLE;
/* Right Click to Popup */
document.body.addEventListener('contextmenu', function(e){
/* Define elements */
let player = document.querySelector('.html5-video-player');
let time = document.querySelector('.ytp-progress-bar');
/* Stop playing */
if(player.classList.contains('playing-mode')) player.click();
/* Get current time */
let t = time.attributes['aria-valuetext'].textContent.split('/')[0].split(':').map(t => parseInt(t)).reverse();
let start = 0;
switch(t.length){
case(3):
start += t[2]*60*60;
case(2):
start += t[1]*60;
case(1):
start += t[0];
}
let params = PARAMS.concat('start=' + start);/*use params at local scope*/
/* Build URL */
/* (Duplicated params are overwritten by former) */
let l = location.href.split('?');
let url = l[0] + '?' + params.join('&');
if(l.length === 2) url += ('&' + l[1]);
/* Open popup window */
/* (Use URL for window name to prevent popupping the same videos) */
window.open(url, location.href, [
'width=' + POPUPWIDTH,
'height=' + (POPUPWIDTH / document.body.offsetWidth) * document.body.offsetHeight,
].join(','));
e.preventDefault();
e.stopPropagation();
}, {capture: true});
},
showReadyAnimation: function(e){
let ready = document.createElement('div');
ready.style.position = 'absolute';
ready.style.margin = 'auto';
ready.style.top = ready.style.bottom = '0';
ready.style.left = '50%';
ready.style.width = ready.style.height = '0px';
ready.style.borderRadius = '0px';
ready.style.background = 'rgba(255,255,255,1.0)';
ready.style.transitionDuration = READYDURATION;
ready.addEventListener('transitionend', function(){
document.body.removeChild(ready);
});
document.body.appendChild(ready);
requestAnimationFrame(function(){
let size = Math.hypot(document.body.clientWidth, document.body.clientHeight);
ready.style.width = ready.style.height = size + 'px';
ready.style.left = 'calc(50% - ' + size + 'px / 2)';
ready.style.borderRadius = size + 'px';
ready.style.background = 'rgba(255,255,255,0.0)'
});
},
};
let log = (DEBUG) ? console.log.bind(null, SCRIPTNAME + ':') : function(){};
core.initialize();
console.timeEnd(SCRIPTNAME);
})();