Greasy Fork is available in English.
Youtube影片旋轉90°
当前为
// ==UserScript==
// @name YouTube Rotate 90°
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Youtube影片旋轉90°
// @author zaqwsx2205
// @match https://*.youtube.com/*
// @match https://*.youtube.com/watch?v=*
// @match https://www.youtube.com/embed/*
// @match https://www.youtube-nocookie.com/embed/*
// @require https://code.jquery.com/jquery-3.4.1.min.js
// @grant none
// ==/UserScript==
(function() {
'use strict';
var width;
var height;
var heightTest;
var bool = false;
var safeTest = location.href;
function transform90(){
setTimeout(function(){
width = $(".html5-video-container").outerWidth();
height = $(".html5-video-container").outerHeight();
heightTest = width - height;
$(".video-test1").html('<style>.video-stream{width:calc(100% - '+heightTest+'px)!important;}</style>');
}, 20);
}
function build(){
$(".video-test, .video-test1, .video-test2, .transform90").remove();
if($(".ytp-embed").length > 0){
$(".html5-video-container").append('<div class="video-test2"></div>');
$(".video-test2").html('<style>.ytp-autohide .transform90-top{opacity: 0;-moz-transition: opacity .1s cubic-bezier(0.4,0.0,1,1);-webkit-transition: opacity .1s cubic-bezier(0.4,0.0,1,1);transition: opacity .1s cubic-bezier(0.4,0.0,1,1);}.ytp-transform90-icon {margin: auto;width: 36px;height: 36px;position: relative;}.ytp-big-mode .ytp-transform90-icon {width: 54px;height: 54px;} .ytp-transform90-title{font-weight: 500;text-align: center;font-size: 14px;} .ytp-big-mode .ytp-transform90-title{font-size: 20px;}</style>');
$('.ytp-chrome-top-buttons').prepend('<button class="ytp-button transform90 transform90-top" data-tooltip-opaque="true" aria-label="" style="width: auto;height: auto;"><div class="ytp-transform90-icon" style="transform:scaleX(-1);"><svg version="1.1" x="0px" y="0px" viewBox="0 0 453.227 453.227" style="enable-background:new 0 0 453.227 453.227;" xml:space="preserve" width="50%" height="100%" class=""><g><g><g><g><path d="M139.453,120.747L1.107,259.093L139.453,397.44L277.8,259.093L139.453,120.747z M61.373,259.093l77.973-77.973 l78.08,77.973l-77.973,77.973L61.373,259.093z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/><path d="M395.88,125.44C358.333,88,309.267,69.227,260.093,69.227V0l-90.56,90.56l90.56,90.453v-69.12 c38.187,0,76.48,14.613,105.6,43.733c58.347,58.347,58.347,152.853,0,211.2c-29.12,29.12-67.413,43.733-105.6,43.733 c-20.693,0-41.28-4.373-60.48-12.907l-31.787,31.787c28.587,15.787,60.373,23.787,92.267,23.787 c49.173,0,98.24-18.773,135.787-56.213C470.867,322.027,470.867,200.427,395.88,125.44z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/></g></g></g></g> </svg></div><div class="ytp-transform90-title">Video Rotate 90°</div></button>');
}else{
$(".ytp-right-controls").prepend('<button class="transform90 ytp-button" title="Video Rotate 90°" aria-label="Video Rotate 90°" style="display: inline-flex;justify-content: center; transform:scaleX(-1);"><svg version="1.1" x="0px" y="0px" viewBox="0 0 453.227 453.227" style="enable-background:new 0 0 453.227 453.227;" xml:space="preserve" width="50%" height="100%" class=""><g><g><g><g><path d="M139.453,120.747L1.107,259.093L139.453,397.44L277.8,259.093L139.453,120.747z M61.373,259.093l77.973-77.973 l78.08,77.973l-77.973,77.973L61.373,259.093z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/><path d="M395.88,125.44C358.333,88,309.267,69.227,260.093,69.227V0l-90.56,90.56l90.56,90.453v-69.12 c38.187,0,76.48,14.613,105.6,43.733c58.347,58.347,58.347,152.853,0,211.2c-29.12,29.12-67.413,43.733-105.6,43.733 c-20.693,0-41.28-4.373-60.48-12.907l-31.787,31.787c28.587,15.787,60.373,23.787,92.267,23.787 c49.173,0,98.24-18.773,135.787-56.213C470.867,322.027,470.867,200.427,395.88,125.44z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/></g></g></g></g> </svg></button>');
}
$('.transform90').on("click", function() {
bool = !bool;
if(bool){
$(".html5-video-container").append('<div class="video-test"></div>');
$(".html5-video-container").append('<div class="video-test1"></div>');
$(".video-test").html('<style>.html5-video-container {display: flex;justify-content: center;align-items: center;height: 100%;}.video-stream{position:relative !important; transform:rotate(90deg); height:auto !important; left:0 !important; top:0 !important;}</style>');
transform90();
}else{
$(".video-test, .video-test1").remove();
}
});
}
function observeTEST() {
var composeBox = $('#player-container video')[0];
var composeObserver = new MutationObserver(function(e) {
if(safeTest != location.href){
safeTest = location.href;
bool = false;
build();
}
});
if(!composeBox) {
window.setTimeout(observeTEST,500);
return;
}
var config = {characterData: true, childList: true, attributes: true};
composeObserver.observe(composeBox,config);
}
$(document).ready(function(){
build();
observeTEST();
$(window).resize( function () {
if(bool){
transform90();
}
});
document.addEventListener("fullscreenchange", function( event ) {
if(bool){
transform90();
}
});
$(".ytp-size-button").click(function(){
if(bool){
transform90();
}
});
});
})();