Node+React应用中YouTube嵌入视频无法加载问题排查

我帮你排查到问题所在了——JSON里的URL包含HTML转义字符&，而React直接把它传给iframe的src属性时，浏览器会把&当作字面量字符，而不是解析成&，这就导致YouTube无法正确识别后面的参数（rel=0和showinfo=0），所以视频加载失败。

这里有两种简单的解决办法：

方法一：在React组件中解码转义字符 #

直接在组件里对URL进行转义解码，把&还原成&：

export default props => (
  <section className="video">
    <iframe 
      className="videoIFrame" 
      src={decodeURIComponent(props.content.url)} 
      frameBorder="0" 
      allowFullScreen
    ></iframe>
  </section>
)

或者用字符串替换的方式更精准处理&：

export default props => (
  <section className="video">
    <iframe 
      className="videoIFrame" 
      src={props.content.url.replace(/&amp;/g, '&')} 
      frameBorder="0" 
      allowFullScreen
    ></iframe>
  </section>
)

方法二：预处理JSON数据 #

如果你的JSON是通过接口或文件获取的，可以在拿到数据后先处理URL，再传给组件：

// 假设你用fetch获取JSON数据
fetch('your-video-data.json')
  .then(response => response.json())
  .then(rawData => {
    // 解码URL里的转义字符
    const processedData = {
      ...rawData,
      content: {
        ...rawData.content,
        url: decodeURIComponent(rawData.content.url)
      }
    };
    // 把processedData传给你的React组件使用
  });

处理后，iframe的src会变成正确的https://www.youtube.com/embed/tE3_NyCs90I?rel=0&showinfo=0，YouTube就能正常加载视频了。

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