youtube video rotate with extension

I had find a firefox extension can rotate youtube video, this is the code

var css_youtube_video_rotate__plus_90_degree = `
#movie_player {
    background-color: rgb(0, 0, 0);
}

#movie_player .video-stream.html5-main-video {
    transform: scale(0.55) rotate(90deg);
}

#movie_player .ytp-tooltip.ytp-bottom.ytp-preview {
    transform: scale(0.6) rotate(90deg);
}

#movie_player .ytp-tooltip.ytp-bottom.ytp-preview .ytp-tooltip-text-wrapper {
    font-size:1.35em;
    transform: rotate(-90deg);
    bottom: calc(50% - 7.5px);
    left: calc(50% - 20px);
}`;

var css_youtube_video_rotate__minus_90_degree = `
#movie_player {
    background-color: rgb(0, 0, 0);
}

#movie_player .video-stream.html5-main-video {
    transform: scale(0.55) rotate(-90deg);
}

#movie_player .ytp-tooltip.ytp-bottom.ytp-preview {
    transform: scale(0.6) rotate(-90deg);
}

#movie_player .ytp-tooltip.ytp-bottom.ytp-preview .ytp-tooltip-text-wrapper {
    font-size:1.35em;
    transform: rotate(90deg);
    bottom: calc(50% - 7.5px);
    left: calc(-50% + 20px);
}`;

var css_youtube_video_rotate__reset_degree = ``;

function createRotateButton() {
    var newStyle = document.createElement('style');
    newStyle.type = 'text/css';
    newStyle.id = 'style-youtube-video-rotate'
    document.body.appendChild(newStyle);

    var newScript = document.createElement('script');
    newScript.innerHTML = `
    function btnRotateVideo(degree) {
        var styleYoutubeVideoRotate = document.getElementById('style-youtube-video-rotate');
        if (degree === 90) {
            styleYoutubeVideoRotate.innerHTML = \`${css_youtube_video_rotate__plus_90_degree}\`;
        } else if (degree === -90) {
            styleYoutubeVideoRotate.innerHTML = \`${css_youtube_video_rotate__minus_90_degree}\`;
        } else {
            styleYoutubeVideoRotate.innerHTML = \`${css_youtube_video_rotate__reset_degree}\`;
        }
    }
    `;
    document.body.appendChild(newScript);

    var ytpRightControls = document.getElementsByClassName('ytp-right-controls')[0];

    var buttonPlus90Degree = document.createElement('button');
    buttonPlus90Degree.setAttribute('onclick', 'btnRotateVideo(90);');
    buttonPlus90Degree.className = 'ytp-rotate-plus-90-degree-button ytp-button';
    buttonPlus90Degree.title = 'rotate 90°';
    buttonPlus90Degree.setAttribute('aria-pressed', 'false');
    buttonPlus90Degree.innerHTML = `<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
                            <text x="50%" y="22" fill="#fff" text-anchor="middle">90°</text>
                        </svg>`;
    ytpRightControls.insertBefore(buttonPlus90Degree, ytpRightControls.childNodes[0]);

    //================================================================================

    var buttonResetDegree = document.createElement('button');
    buttonResetDegree.setAttribute('onclick', 'btnRotateVideo(0);');
    buttonResetDegree.className = 'ytp-rotate-reset-degree-button ytp-button';
    buttonResetDegree.title = 'original video without rotate';
    buttonResetDegree.setAttribute('aria-pressed', 'false');
    buttonResetDegree.innerHTML = `<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
                            <text x="50%" y="22" fill="#fff" text-anchor="middle">0°</text>
                        </svg>`;
    ytpRightControls.insertBefore(buttonResetDegree, ytpRightControls.childNodes[0]);

    //================================================================================

    var buttonMinus90Degree = document.createElement('button');
    buttonMinus90Degree.setAttribute('onclick', 'btnRotateVideo(-90);');
    buttonMinus90Degree.className = 'ytp-rotate-minus-90-degree-button ytp-button';
    buttonMinus90Degree.title = 'rotate -90°';
    buttonMinus90Degree.setAttribute('aria-pressed', 'false');
    buttonMinus90Degree.innerHTML = `<svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
                            <text x="50%" y="22" fill="#fff" text-anchor="middle">-90°</text>
                        </svg>`;
    ytpRightControls.insertBefore(buttonMinus90Degree, ytpRightControls.childNodes[0]);
}


var loadWatchPageFirstTime = true;
document.body.addEventListener("load", fnMain, true); 
function fnMain(e) {
    if ('/watch' === location.pathname) {
        if (loadWatchPageFirstTime) {
            loadWatchPageFirstTime = false;

            var styleYoutubeVideoRotate = document.getElementById('style-youtube-video-rotate');
            if (styleYoutubeVideoRotate === null) {
                createRotateButton();
            }
            
        }
    } else {
        loadWatchPageFirstTime = true;
    }
}

Post: 2019.04.17 21:46

Views: 471

Edit blog

Follow me: @twitter @github
Scan QR code and Donate me via alipay:
donate me via alipay
Donate me Bitcoin:136MYemy5QmmBPLBLr1GHZfkES7CsoG4Qh
Powered by josense, Last updated: 2019-04-15 09:45 RSS