您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Move YouTube Player Controls below the video
当前为
- // ==UserScript==
- // @name Youtube Player Controls below Video
- // @description Move YouTube Player Controls below the video
- // @namespace Userscript
- // @version 0.1.1
- // @match https://www.youtube.com/*
- // @grant none
- // @noframes
- // @author CY Fung
- // @license MIT
- // @run-at document-start
- // ==/UserScript==
- (() => {
- const SCRIPT_CLASSNAME = 'yt8447-enabled'
- const SCRIPT_CSS_ID = 'fj74F'
- const css_text = `
- .${SCRIPT_CLASSNAME} {
- --yt8448-gap: max(58px, var(--subs-gap, 0px));
- --yt8448-gap-theater: max(58px, var(--subs-gap-theater, 0px));
- --yt8447-height: 52px;
- }
- .${SCRIPT_CLASSNAME} ytd-player#ytd-player .ytp-chrome-bottom {
- bottom: calc( var(--yt8447-height) * -1 );
- }
- .${SCRIPT_CLASSNAME} ytd-player#ytd-player #movie_player::after {
- position: absolute;
- display: block;
- content: '';
- left: 0;
- right: 0;
- height: var(--yt8447-height);
- bottom: calc( var(--yt8447-height) * -1 );
- opacity: 0 !important;
- pointer-events: auto !important;
- }
- .${SCRIPT_CLASSNAME} ytd-player#ytd-player #movie_player {
- overflow: visible;
- z-index: 999;
- }
- .${SCRIPT_CLASSNAME} #columns.ytd-watch-flexy {
- --subs-gap: var(--yt8448-gap);
- --subs-gap-theater: var(--yt8448-gap-theater);
- }
- .${SCRIPT_CLASSNAME}[theater]:not([fullscreen]) #below.ytd-watch-flexy, .${SCRIPT_CLASSNAME}[theater]:not([fullscreen]) #secondary.ytd-watch-flexy {
- --yt8448-gap: var(--yt8448-gap-theater);
- }
- .${SCRIPT_CLASSNAME} #below.ytd-watch-flexy, .${SCRIPT_CLASSNAME}[theater]:not([fullscreen]) #secondary.ytd-watch-flexy {
- margin-top: var(--yt8448-gap) !important;
- transition: margin-top 0.25s;
- }
- `
- function isItVideoPage() {
- return window.location.href.includes('/watch?v=');
- }
- let mState = 0;
- function main(evt) {
- if (mState === 0) {
- if (document.getElementById(SCRIPT_CSS_ID)) {
- mState = -1;
- console.warn('yt8447: duplicated script');
- return;
- }
- const style = document.createElement('style');
- style.textContent = css_text;
- style.id = SCRIPT_CSS_ID;
- document.head.appendChild(style);
- } else if (mState < 0) {
- return;
- }
- if (evt.type === 'yt-page-data-updated') {
- mState = 1;
- } else if (mState === 0) {
- mState = 2;
- } else if (mState >= 1) {
- return;
- }
- const playerElt = document.querySelector('ytd-watch-flexy');
- if (playerElt !== null) {
- if (isItVideoPage()) {
- playerElt.classList.add(SCRIPT_CLASSNAME);
- } else {
- playerElt.classList.remove(SCRIPT_CLASSNAME);
- }
- }
- }
- document.addEventListener('yt-navigate-finish', main);
- document.addEventListener('yt-page-data-fetched', main);
- })();