如何自动为缺失宽高的HTML <video>标签设置属性？全局或按域名

当然可以实现自动化调整！针对Chrome直接播放MP3时生成的

这是最推荐的方式，通过油猴脚本可以自动给目标页面的

全局生效脚本 #

如果想让所有Chrome打开的MP3播放页面都自动调整尺寸，用这个脚本：

// ==UserScript==
// @name         Fix Chrome MP3 Video Player Size
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自动放大Chrome播放MP3时的视频控件尺寸
// @author       Your Name
// @match        *://*/*.mp3
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 监听DOM变化，确保抓到生成的video元素
    const observer = new MutationObserver((mutations) => {
        const videoEl = document.querySelector('video');
        if (videoEl && !videoEl.style.width) {
            // 这里可以自定义尺寸，比如设为页面宽度的80%，高度120px
            videoEl.style.width = '80%';
            videoEl.style.height = '120px';
            // 也可以直接设置固定像素值：videoEl.width = 800; videoEl.height = 100;
            observer.disconnect(); // 完成调整后停止监听
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();

特定域名生效脚本 #

如果只想给某几个域名下的MP3页面生效，只需要修改脚本里的@match规则就行，比如只针对example.com的MP3：

// 把原来的@match改成：
// @match        https://example.com/*.mp3

如果你不想装脚本扩展，也可以用Chrome自带的本地覆盖功能，把自定义样式永久保存：

• 打开Chrome DevTools（按F12或右键选择「检查」），切换到「Sources」面板
• 点击左侧的「Overrides」标签，勾选「Enable local overrides」，然后选择本地一个空文件夹用来保存覆盖文件
• 打开任意MP3播放页面，在「Elements」面板找到
• 右键点击你修改的样式规则，选择「Save for overrides」
• 以后每次Chrome打开这类MP3页面时，都会自动应用你设置的尺寸样式

两种方案都能解决问题，油猴脚本更灵活，本地覆盖则适合不想装扩展的场景~

内容的提问来源于stack exchange，提问作者Mr. Boy