如何移除Video.js中YouTube视频的标题、分享按钮及Logo

我正在使用Video.js渲染YouTube视频，但无法移除视频标题、分享按钮和YouTube Logo。

我的配置代码 #

Video.js初始化代码 #

React.useEffect(() => {
    if (videoNode.current) {
      const playerInstance = videojs(videoNode.current, {
        ...initialOptions,
        ...options,
        BlockYoutubeButton: false,
      });

      setPlayer(playerInstance);
    }
  }, [videoNode?.current, options]);

Options配置 #

const videoJsOptions = {
    ...optionsPlayer,
    playing: true,
    sources: [
      {
        type: "video/youtube",
        src: optionsPlayer.urlVideoTY
          ? optionsPlayer.urlVideoTY
          : "https://www.youtube.com/watch?v=hzqmRq56X8o",
      },
    ],
    techOrder: ["youtube"],
  };

已尝试的无效方法 #

• 添加CSS覆盖类并设置display:none，但无法访问iframe内部元素
• 在Video.js选项中添加controls:false和controlBar:false参数，均无效

Video.js的YouTube渲染依赖于YouTube Iframe API，无法通过常规CSS或Video.js基础配置修改YouTube原生UI元素，必须通过传入YouTube专属参数来控制。

修改你的videoJsOptions，新增youtube配置项，传入控制UI的playerVars参数：

const videoJsOptions = {
    ...optionsPlayer,
    playing: true,
    sources: [
      {
        type: "video/youtube",
        src: optionsPlayer.urlVideoTY
          ? optionsPlayer.urlVideoTY
          : "https://www.youtube.com/watch?v=hzqmRq56X8o",
      },
    ],
    techOrder: ["youtube"],
    // 新增YouTube参数配置
    youtube: {
      playerVars: {
        modestbranding: 1,    // 隐藏YouTube主Logo，仅保留角落小标识
        showinfo: 0,          // 隐藏视频标题、上传者信息
        rel: 0,               // 隐藏分享按钮，且视频结束后不显示相关视频
        // 可选：若需完全隐藏YouTube原生控制栏，添加以下参数
        // controls: 0
      }
    }
  };

参数说明 #

• modestbranding: 1：这是隐藏YouTube Logo的核心参数，是官方支持的唯一方式（无法完全移除所有YouTube标识，符合API规范）
• showinfo: 0：隐藏视频标题、上传者头像等顶部信息栏
• rel: 0：禁用视频结束后的相关推荐，同时会隐藏分享按钮
• controls: 0：如果不需要YouTube原生控制栏，可以开启此参数，改用Video.js自带的控制栏

注意：YouTube API参数会随版本调整，若部分参数失效，请参考最新的YouTube Iframe API文档调整参数值。

内容的提问来源于stack exchange，提问作者MD Monteiro