YouTube播放器网页全屏

YouTube 视频播放器网页全屏，按 n 快捷键触发（再次按 n 可取消全屏）

目前為 2024-11-17 提交的版本，檢視最新版本。

安裝腳本 ?

換行

// ==UserScript==
// @name         YouTube播放器网页全屏
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  YouTube 视频播放器网页全屏，按 n 快捷键触发（再次按 n 可取消全屏）
// @author       meteora
// @match        https://www.youtube.com/*
// @match        https://www.youtube.com
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// @license MIT
// ==/UserScript==
;(() => {
	// 创建全屏按钮样式
	const style = document.createElement("style")
	style.textContent = `
        .webpage-fullscreen {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            max-width: none !important;
            max-height: none !important;
            z-index: 9999 !important;
            background: black;
        }
    `
	document.head.appendChild(style)

	let isWebpageFullscreen = false
	document.addEventListener("keydown", function (event) {
		// 忽略在输入框中的按键事件
		if (
			event.target.tagName === "INPUT" ||
			event.target.tagName === "TEXTAREA"
		) {
			return
		}
		// 按键盘 n 触发
		if (event.key === "n") {
			const videoContainer = document.getElementById("full-bleed-container")
			if (!videoContainer) return
			isWebpageFullscreen = !isWebpageFullscreen
			if (isWebpageFullscreen) {
				videoContainer.classList.add("webpage-fullscreen")
			} else {
				videoContainer.classList.remove("webpage-fullscreen")
			}
			// 模拟屏幕尺寸变化，让播放器大小自适应
			window.dispatchEvent(new Event("resize"))
			// 阻止默认行为
			event.preventDefault()
		}
	})
})()