Next.js网站嵌入Instagram视频无法在页内播放问题求助

问题描述 #

我用Next.js搭建网站时，通过Instagram的「Embed」功能嵌入视频帖，把复制的嵌入代码粘贴到HTML后出现两种情况：

• 部分视频可直接在网页内播放，点击播放按钮即可正常播放：
  
• 部分视频无法在页内播放，仅显示「Watch on Instagram」选项，点击后跳转至Instagram官网播放：
  

我尝试过以下方案但未解决问题：

解决步骤 #

1. 正确加载Instagram嵌入脚本 #

Instagram嵌入依赖官方脚本，在Next.js里用next/script组件加载，确保脚本在嵌入内容前加载完成：

import Script from 'next/script';

export default function YourPage() {
  return (
    <>
      <Script
        src="https://www.instagram.com/embed.js"
        strategy="beforeInteractive"
      />
      {/* 放置你的Instagram嵌入代码 */}
      <blockquote class="instagram-media" data-instgrm-permalink="你的视频链接" data-instgrm-version="14"></blockquote>
    </>
  );
}

2. 检查原视频隐私设置 #

无法页内播放的视频，大概率是原帖隐私设置问题：

• 确认原Instagram视频帖为「公开」状态，私密或仅粉丝可见的帖子无法在外部网站页内播放
• 商业账号或受限内容，需确认账号是否允许嵌入

3. 验证嵌入代码完整性 #

复制嵌入代码时要完整，包括blockquote标签及data-instgrm-permalink、data-instgrm-version等关键属性，不要遗漏内容。

4. 处理Next.js渲染兼容问题 #

如果用静态生成（SSG）或服务端渲染（SSR），需在客户端动态初始化嵌入内容：

import { useEffect } from 'react';

export default function InstagramEmbed({ postUrl }) {
  useEffect(() => {
    if (window.instgrm) {
      window.instgrm.Embeds.process();
    } else {
      const script = document.createElement('script');
      script.src = 'https://www.instagram.com/embed.js';
      script.async = true;
      script.onload = () => window.instgrm?.Embeds.process();
      document.body.appendChild(script);
    }
  }, []);

  return (
    <blockquote className="instagram-media" data-instgrm-permalink={postUrl} data-instgrm-version="14"></blockquote>
  );
}

5. 调整网站CSP配置 #

如果网站设置了内容安全策略（CSP），需允许加载Instagram资源，在next.config.js添加规则：

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "script-src 'self' https://www.instagram.com; frame-src 'self' https://www.instagram.com;",
          },
        ],
      },
    ];
  },
};

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