Hi,
We are trying to embed a YouTube video on a page, but get an internal server error when we add the YouTube block. This is what shows up in the console:
Page:
Hey @kasper,
how are you trying to embed it? Is this coming from Gutenberg blocks or you want to embed directly in your React app?
If you provide some more info we can help you better. Some code snippets would be very useful.
Greetings,
Nikolay
Hi @ni.bonev,
It is a gutenberg block, so I’m not sure what kind of code snippets you want.
Kasper
Hey Kasper!
Maybe this guide helps you:
Hi @Pablo!
I have read that guid quite a lot actually, that is how I have Gutenberg implemented in the AgTech theme, and it has helped me a lot. But I can’t find anything there about this specific issue, and this issue is something that has popped up all of a sudden after an update, it has not been there before.
I can try to test it on a clean install.
Hey @kasper,
I had the same issue with some image elements once I updated Gutenberg. A few questions that could help us help you:
- What is the html returned by wordpress, that actually creates the error?
- What is that file
parser.js? - Have you tried maybe overwriting the processor that causes this issue?
- I remember some time ago I had a problem with
<Html2React/>failing to parse some stuff and crashing. Can you try to replace your<Html2React/>component with simply a<div dangerouslySetInnerHtml={{ __html: yourPageHtml }}></div>. - If you are running on vercel, can you push a dev build to the your dev environment so we can better see the error?
Greetings
Hi @ni.bonev,
When i tested on a site without the Gutenberg plugin, it works fine. There is some new iframe parameters in with the latest version of the gutenberg plugin.
Html output without gutenberg plugin, lastes version of wp:
<figure
class="
wp-block-embed
is-type-video is-provider-youtube
wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio
"
>
<div class="wp-block-embed__wrapper">
<iframe
loading="lazy"
title="Getting Started with Frontity Framework"
width="750"
height="422"
src="https://www.youtube.com/embed/FCnGfYfWulA?feature=oembed"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen=""
style="max-width: 100%; max-height: 343px"
></iframe>
</div>
</figure>
Html output with latest gutenberg plugin, lates version of wp:
<figure
class="
wp-block-embed
is-type-video is-provider-youtube
wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio
"
>
<div class="wp-block-embed__wrapper">
<iframe
loading="lazy"
title="Getting Started with Frontity Framework"
width="750"
height="422"
src="https://www.youtube.com/embed/FCnGfYfWulA?feature=oembed"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen=""
sandbox="allow-scripts allow-same-origin allow-popups"
style="max-width: 100%; max-height: 343px"
></iframe>
</div>
</figure>
So they have removed frameborder, and added sandbox.
EDIT:
Even though i removed the Gutenberg plugin, the embed still causes the same error on the page. I will look over the other questions and get back to you later.
Hi @ni.bonev,
To answer the questions:
- parser.js is a himalaya file, and it appears that this is the code that is throwing the error:
var position = {
start: token.position.start,
end: attrToken.position.end
};
-
No, I don’t think I have the knowledge to do that.
-
That makes it work, but the images look weird, as Html2React fixes some wp-block-image stuff.
-
Not sure what you mean, I can either make production or preview build, is it a preview build that you want?
Hi again @ni.bonev.
Just to let you know, I made a fresh Frontity project with the mars theme, and the error is there as well. So right now you can’t embed videos, on the latest version of Frontity and WordPress.
If you use custom html to add an iframe, eg:
<iframe width="560" height="315" src="https://www.youtube.com/embed/m8XRKyY19_U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
The embed works, but not when you use the Gutenberg YouTube embed block.
I’ve been testing it with a fresh install using mar-s theme but I wasn’t able to reproduce the issue. I tested it both using Gutenberg blocks and importing the styles from the latest version of the plugin in the Frontity project, and adding directly the iframe to the html.
Could you share some info about which browser / OS are you using to check if it’s related to that please?
Hi @SantosGuillamot,
I have the latest version of Frontity, the latest version of WordPress, the latest version of the Gutenberg plugin, and the latest style for the Gutenberg plugin found here. I’m running on macOS and have tested in Chrome, Safari, and Firefox. Same error in all browsers. My coworker has a windows machine, same error there as well.
The error stems from the Html2React component, which uses some elements from a npm package called Himalaya, and that is the file that throws the error.
It is only when i try to use an embed block, not when I put an iframe directly into the editor with custom html.
I’m sorry but I still can’t reproduce it. Could you please run npx frontity info and share the result here? Also, could you share the WordPress PHP theme you are using in case it’s doing something else please?
I tested everything in a fresh project but this page you shared is where you find the issue? It works for me too.
Hi @SantosGuillamot,
I will come back to you with the first things you asked. On the page that you linked, I have put in a custom html block, and copied the embed code from YouTube. That works fine. It is only the YouTube Gutenberg block that’s not working.