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: 1555508804

Views: 510

Follow me: @twitter @github
Scan QR code and Donate me via alipay:
donate me via alipay
Donate me Bitcoin:136MYemy5QmmBPLBLr1GHZfkES7CsoG4Qh
Powered by GoSense RSS