如何用Stylus的CSS或书签脚本移动YouTube聊天输入框至视频下方居中

方法一：Stylus扩展CSS方案 #

聊天输入框位于独立的live_chat类iframe中，需针对该iframe的URL单独编写样式：

1. 打开Stylus，新建样式，设置URL匹配规则为 https://www.youtube.com/live_chat*
2. 粘贴以下CSS代码：

/* 简化原聊天容器高度，避免占用多余空间 */
#container.ytd-live-chat-frame {
  height: auto !important;
  min-height: auto !important;
}

/* 固定定位输入框容器到视频下方居中 */
#input-container.ytd-live-chat-message-input-renderer {
  position: fixed !important;
  bottom: 80px !important; /* 可根据视频控制栏高度调整 */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 70% !important; /* 自定义输入框宽度 */
  background: #0f0f0f !important; /* 适配深色模式，浅色模式改为#ffffff */
  padding: 10px !important;
  border-radius: 8px !important;
  box-shadow: 0 0 10px rgba(0,0,0,0.3) !important;
  z-index: 9999 !important;
}

/* 让输入框填满容器宽度 */
#input.ytd-live-chat-message-input-renderer {
  width: 100% !important;
}

/* 自动适配深浅色模式 */
@media (prefers-color-scheme: light) {
  #input-container.ytd-live-chat-message-input-renderer {
    background: #ffffff !important;
    color: #000 !important;
  }
}

3. 保存样式后刷新直播页面即可生效。

方法二：书签脚本方案 #

若CSS因优先级问题失效，可通过书签脚本直接向iframe注入样式：

1. 新建书签，将以下代码设为书签URL：

javascript:(function(){
  const chatIframe = document.querySelector('iframe[src*="live_chat"]');
  if(!chatIframe) return;

  const injectStyle = () => {
    const iframeDoc = chatIframe.contentDocument || chatIframe.contentWindow.document;
    const style = iframeDoc.createElement('style');
    style.textContent = `
      #container.ytd-live-chat-frame {
        height: auto !important;
        min-height: auto !important;
      }
      #input-container.ytd-live-chat-message-input-renderer {
        position: fixed !important;
        bottom: 80px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 70% !important;
        background: #0f0f0f !important;
        padding: 10px !important;
        border-radius: 8px !important;
        box-shadow: 0 0 10px rgba(0,0,0,0.3) !important;
        z-index: 9999 !important;
      }
      #input.ytd-live-chat-message-input-renderer {
        width: 100% !important;
      }
      @media (prefers-color-scheme: light) {
        #input-container.ytd-live-chat-message-input-renderer {
          background: #ffffff !important;
          color: #000 !important;
        }
      }
    `;
    iframeDoc.head.appendChild(style);
  };

  chatIframe.onload = injectStyle;
  if(chatIframe.contentDocument.readyState === 'complete') injectStyle();
})();

2. 打开YouTube直播页面，点击该书签即可触发样式修改。

注意事项 #

• YouTube页面结构可能更新，若选择器失效，可通过开发者工具重新定位输入框的最新类名/ID替换代码中的对应部分。
• 可根据需求调整bottom、width等参数，优化显示位置和尺寸。

内容的提问来源于stack exchange，提问作者Alain BUFERNE