如何移除网站嵌入的YouTube订阅按钮中的文字

嘿，我来帮你搞定这个问题！要移除订阅按钮里的"YouTube"文字并给按钮定制样式，咱们可以通过CSS来实现，这里提供两种实用的方法：

方法一：通过文本缩进隐藏文字+自定义按钮样式 #

这种方法通过把文字移出可视区域，同时保留按钮的可点击性和图标显示：

/* 定位订阅按钮容器，自定义基础样式 */
.ytd-subscribe-button-renderer {
  background-color: #ff0000 !important; /* 自定义按钮背景色 */
  border-radius: 24px !important; /* 圆角大小 */
  padding: 8px 16px !important; /* 内边距 */
  overflow: hidden !important; /* 确保溢出文字被隐藏 */
  border: none !important; /* 去掉默认边框 */
  cursor: pointer !important;
}

/* 隐藏"YouTube"文字 */
.ytd-subscribe-button-renderer .yt-core-attributed-string--white-space-no-wrap {
  text-indent: -9999px !important; /* 把文字移出可视区域 */
  line-height: 0 !important; /* 消除文字行高带来的占位 */
}

/* 单独调整订阅图标样式（可选） */
.ytd-subscribe-button-renderer yt-icon {
  margin-right: 0 !important; /* 去掉图标和文字的默认间距 */
  color: #ffffff !important; /* 图标颜色 */
  font-size: 20px !important; /* 图标大小 */
}

方法二：用伪元素覆盖文字+自定义按钮样式 #

如果第一种方法不生效，试试用伪元素直接覆盖文字区域，同时保证图标正常显示：

/* 按钮容器基础样式 */
.ytd-subscribe-button-renderer {
  position: relative !important;
  background-color: #282828 !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  border: none !important;
  cursor: pointer !important;
}

/* 用伪元素覆盖文字区域 */
.ytd-subscribe-button-renderer .yt-core-attributed-string--white-space-no-wrap::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: inherit !important; /* 继承按钮背景色，实现覆盖 */
  z-index: 1 !important;
}

/* 让图标显示在伪元素上方 */
.ytd-subscribe-button-renderer yt-icon {
  position: relative !important;
  z-index: 2 !important;
  color: #ffffff !important;
}

注意事项 #

• YouTube的元素类名可能会有更新，如果上面的选择器不生效，可以打开浏览器开发者工具（F12），直接定位到按钮的具体元素，调整CSS选择器的精准度。
• 如果你是嵌入的iframe版订阅按钮，可能需要结合JavaScript或者针对iframe的父容器做样式调整，但大多数自定义场景下，上面的CSS方法足够用啦。

内容的提问来源于stack exchange，提问作者Blues Clues