I recently switched from GatsbyJS to NextJS. Instead of creating a site from scratch I decided to use the tailwind-nextjs-starter-blog as a starting point. The migration was straight forward, simply migrate the frontmatter block to the new format.
However one thing suddenly stopped working - Youtube Embed iFrames.
First Attempt: Convert iframe into a React Component
My first assumption was that maybe you are not suppose to embed iframes directly in your *.mdx files. In addition the first google hit for the issue was: The simplest way to embed a youtube video in your react app
The solution is very nice and also makes the video embed responsive. However it does not solve the ‘content blocked’ issue.
F12 in the browser you can open the web developer tools.
Here we can see two separate issues:
- An issue with the ‘Content Security Policy directive’
- An issue with the property ‘allowfullscreen’ not written in the JSX style
For the property
allowfullscreen we simply just have to rename the property to
allowFullScreen to match the JSX style.
It turns out this theme I am using already has a very strict security policy to avoid clickjacking. This means you must explicitty define which external sites are allowed to be embedded.
You configure this in the file
next.config.js. Here we need to adjust the
ContentSecurityPolicy to allow the external site. In this case
// You might need to insert additional domains in script-src if you are using external services
const ContentSecurityPolicy = `
script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app;
style-src 'self' 'unsafe-inline';
img-src * blob: data:;
frame-src giscus.app www.youtube.com