rotate youtube video

rotate.js

let conf = {
    flipX: false,
    flipY: true,
    angle: 180,
};

function rotate(){
    let theaterButton = $('.ytp-size-button.ytp-button');
    if (theaterButton.title.includes("Theater")) {
        setTimeout(rotate, 200);
        return theaterButton.click();
    }

    let container = $("ytd-watch-flexy[theater]");
    let video = $(".html5-main-video");
    let {width,height} = video.style;

    if (conf.angle !== 0 && Math.abs(conf.angle) !== 180) {
        width = +width.slice(0, -2);
        height = +height.slice(0, -2);
        let maxWidth = window.innerHeight-169;

        if (width > maxWidth) {
            width = maxWidth;
            height = maxWidth / 16 * 9;
            video.style.width = width + 'px';
            video.style.height = height  + 'px'
        }

        video.style.top= (width - height) / 2 + 'px';
        container.classList.add("rotate");
    }

    container.classList.add("transform");
}

let $ = document.querySelector.bind(document);
let stylesheet = document.createElement("style");
stylesheet.innerHTML=`
[theater].rotate #player-theater-container.ytd-watch-flexy{ height:calc((16 / 9) * 100vw); }
[theater].transform .html5-main-video { transform: scaleX(${conf.flipX ? -1 : 1}) scaleY(${conf.flipY ? -1 : 1}) rotate(${conf.angle || 0 }deg); }`;

document.body.appendChild(stylesheet);
window.addEventListener("resize", () => setTimeout(rotate, 200)), rotate();

rotate.min.js

let conf = { flipX: false, flipY: true, angle: 180 };
function rotate(){let e=$(".ytp-size-button.ytp-button");if(e.title.includes("Theater"))return setTimeout(rotate,200),e.click();let t=$("ytd-watch-flexy[theater]"),n=$(".html5-main-video"),{width:l,height:a}=n.style;if(0!==conf.angle&&180!==Math.abs(conf.angle)){l=+l.slice(0,-2),a=+a.slice(0,-2);let e=window.innerHeight-169;l>e&&(l=e,a=e/16*9,n.style.width=l+"px",n.style.height=a+"px"),n.style.top=(l-a)/2+"px",t.classList.add("rotate")}t.classList.add("transform")}let $=document.querySelector.bind(document),stylesheet=document.createElement("style");stylesheet.innerHTML=`\n[theater].rotate #player-theater-container.ytd-watch-flexy{ height:calc((16 / 9) * 100vw); }\n[theater].transform .html5-main-video { transform: scaleX(${conf.flipX?-1:1}) scaleY(${conf.flipY?-1:1}) rotate(${conf.angle||0}deg); }`,document.body.appendChild(stylesheet),window.addEventListener("resize",()=>setTimeout(rotate,200)),rotate();