🏠 

Greasy Fork is available in English.

YouTube 剧院模式清爽界面

在 YouTube 剧院模式下隐藏除聊天室外的其他界面元素


安装此脚本?
// ==UserScript==
// @name         YouTube Theater Clean
// @name:zh-CN      YouTube 剧院模式清爽界面
// @namespace    https://violentmonkey.github.io/
// @version      1.0.0
// @description  Hide all UI elements except chat in YouTube theater mode
// @description:zh-CN  在 YouTube 剧院模式下隐藏除聊天室外的其他界面元素
// @author       zeer
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// @license      MIT
// @compatible   chrome
// @compatible   firefox
// @compatible   edge
// @run-at       document-end
// @connect      youtube.com
// @connect      googleapis.com
// @encoding     utf-8
// @noframes
// ==/UserScript==
(function() {
'use strict';  // 启用严格模式,防止一些常见的 JavaScript 错误
// 检查当前页面是否为视频页面
// YouTube 视频页面的 URL 路径中包含 '/watch'
function isVideoPage() {
return window.location.pathname.includes('/watch');
}
// 清理函数:移除之前添加的样式
// 防止样式重复和冲突
function cleanup() {
const existingStyle = document.getElementById('yt-theater-clean-style');
if (existingStyle) {
existingStyle.remove();
}
}
// 初始化函数:添加自定义样式
function init() {
// 如果不是视频页面,直接返回
if (!isVideoPage()) return;
try {
cleanup();  // 先清理已存在的样式
// 创建 style 元素
const style = document.createElement('style');
style.id = 'yt-theater-clean-style';  // 添加唯一标识符
// 定义 CSS 样式规则
style.textContent = `
/* 调整剧院模式下视频播放器的上边距 */
ytd-watch-flexy[theater]:not([fullscreen]) {
margin-top: 62px !important;
}
/* 隐藏视频下方的内容区域 */
ytd-watch-flexy[theater] #below {
display: none !important;
}
/* 移除播放器外层容器的上边距 */
ytd-watch-flexy[theater] #player-container-outer {
margin-top: 0 !important;
}
/* 调整主要内容区域的布局 */
ytd-watch-flexy[theater] #columns {
display: flex !important;
max-width: none !important;
}
/* 隐藏不需要的界面元素 */
ytd-watch-flexy[theater] #meta,                    /* 视频元数据 */
ytd-watch-flexy[theater] #info-contents,          /* 视频信息内容 */
ytd-watch-flexy[theater] #related,                /* 相关视频 */
ytd-watch-flexy[theater] ytd-merch-shelf-renderer, /* 商品架 */
ytd-watch-flexy[theater] ytd-video-secondary-info-renderer { /* 视频次要信息 */
display: none !important;
}
`;
// 将样式添加到页面头部
document.head.appendChild(style);
} catch (error) {
console.error('YouTube 剧院模式清爽界面初始化失败:', error);
}
}
// 监听 URL 变化
// 因为 YouTube 是单页面应用,页面切换不会重新加载
let lastUrl = location.href;  // 记录当前 URL
// 创建 MutationObserver 实例监听 DOM 变化
new MutationObserver(() => {
const url = location.href;
if (url !== lastUrl) {    // 如果 URL 发生变化
lastUrl = url;         // 更新记录的 URL
init();                // 重新初始化样式
}
}).observe(document, {         // 开始观察整个文档
subtree: true,            // 监听所有子节点
childList: true           // 监听节点的添加或删除
});
// 页面首次加载时初始化
init();
})();