React项目中YouTube直播不可用时如何隐藏嵌入iframe？

以下是三种经过验证的可落地方案，按实现成本从低到高排序：

方案1：零配额、无CORS前端原生检测（优先推荐） #

完全不需要调用Google API、不需要搭代理，直接用YouTube官方提供的IFrame Player SDK做状态判断：

• 不要提前查询直播状态，直接在页面预留位置初始化绑定对应channel ID的直播播放器，初始状态容器设为隐藏
• 基于SDK提供的事件回调做状态判断，全程不读取iframe内部DOM，完全规避CORS限制：
  • 播放器触发onReady或onStateChange返回状态码1（正在播放）时，说明频道正在直播，直接显示容器
  • 播放器触发onError返回错误码100/150时，说明频道未开播、直播流不可嵌入，直接保持容器隐藏即可
• 参考实现代码：

import { useEffect, useRef, useState } from 'react';

const YTLivePlayer = ({ channelId }) => {
  const [showLive, setShowLive] = useState(false);
  const playerIns = useRef(null);

  useEffect(() => {
    const initPlayer = () => {
      playerIns.current = new window.YT.Player('yt-live-container', {
        channelId,
        playerVars: { autoplay: 0, mute: 1 },
        events: {
          onReady: (e) => {
            if (e.target.getPlayerState() === window.YT.PlayerState.PLAYING) setShowLive(true);
          },
          onStateChange: (e) => {
            setShowLive(e.data === window.YT.PlayerState.PLAYING);
          },
          onError: () => setShowLive(false)
        }
      });
    };

    if (!window.YT) {
      const script = document.createElement('script');
      script.src = 'https://www.youtube.com/iframe_api';
      document.body.appendChild(script);
      window.onYouTubeIframeAPIReady = initPlayer;
    } else {
      initPlayer();
    }

    return () => playerIns.current?.destroy?.();
  }, [channelId]);

  return (
    <div style={{ display: showLive ? 'block' : 'none' }}>
      <div id="yt-live-container" style={{ width: '100%', aspectRatio: '16/9' }} />
    </div>
  );
};

export default YTLivePlayer;

方案2：服务端缓存API请求，配额消耗压到免费额度内 #

如果不想在前端初始化隐藏播放器，可以把之前的API调用逻辑做个小改造，配额消耗可以降到几乎为0：

• 把调用Google Data API v3查询直播状态的逻辑从客户端移到服务端，不要让用户访问时直接触发API请求
• 服务端对查询结果做缓存，设置10~15分钟的过期时间，缓存有效期内所有用户请求直接返回缓存结果，不会触发新的API调用
• 配额核算：Google默认每日API配额为10000，单次search.list查询直播状态消耗100配额，每15分钟调用1次的话，全天仅需调用96次，总消耗9600配额，完全卡在免费额度内，和站点访问量没有任何关系。

方案3：轻量代理检测，无需API密钥 #

如果不想申请Google API密钥，可以用轻量代理逻辑做检测，比爬取整页HTML解析的方案简单很多：

• 在服务端请求YouTube公开的oEmbed查询接口，该接口无跨域限制、不需要鉴权，单次返回仅几百字节的JSON数据，不会触发反爬拦截
• 接口返回有效视频信息时判定为正在开播，返回404/403时判定为未开播
• 同样给结果加3~5分钟的缓存，服务端资源消耗可以忽略。

注意：不要尝试在客户端直接跨域拉取YouTube页面内容做解析，必然触发CORS限制；所有非SDK提供的检测逻辑都放在服务端实现，搭配缓存后几乎没有运行成本。

内容的提问来源于stack exchange，提问作者Billy Criddle