The YouTube iframe does not work after applying COEP to the header

I am using NextJS and added COEP and COOP to the header to use SharedArrayBuffer.

Below is next.config.js.

const nextConfig = {  reactStrictMode: false,  swcMinify: true,  output: 'standalone',  images: {    domains: [...],  },  async headers() {    return [      {        source: '/(.*)',        headers: [          {            key: 'Cross-Origin-Embedder-Policy',            value: 'require-corp',          },          {            key: 'Cross-Origin-Opener-Policy',            value: 'same-origin',          },        ],      },    ];  },};module.exports = nextConfig;

After setting the above, the YouTube iframe does not work.

I am getting a url like 'https://www.youtube.com/embed/...' from a YouTube video and using it in the iframe src.

I tried applying 'Content-Security-Policy' as shown below, but it did not work.

{  key: 'Content-Security-Policy',  value: `frame-ancestors 'self' https://www.youtube.com;`,}

How do I display Youtube as an iframe?