HTML Embeds

Hey there!

I’ve just started playing around with Frontity and it looks great! We have an editorial team that will be creating content and they use Instagram/Facebook/JW Player embeds quite a lot.

These embeds don’t load when the site is client-side, where would I start looking to get these working?

1 Like

Hi @rob!

If the embedded content is an <iframe>, it should work out of the box. However, if the embedded content consists of an HTML element and a <script> trying to render something into it, it won’t work (I think that’s how Instagram and Facebook embeds work, not sure for JW Player). The reason is that React doesn’t execute <script>s on load when they are rendered with dangerouslySetInnerHTML.

The solution is to manually insert those scripts so they execute on load (as described here). In order to do this, our solution for the first version of the framework was an HTML to React converter, where every <script> would be rendered manually by a React component on mount.

We are planning on implementing a similar component for Frontity again, but in the meanwhile, a solution could be to find the scripts inside the content, once the component is mounted, and manually remove and add the <script>s to the DOM again, so they execute on load.

I hope this explanation helped you. If you have any doubt, don’t hesitate to ask :slight_smile:

Hey @rob, welcome to the community :relaxed:

I’ve just opened a new topic with the 1.0 Roadmap. It includes our html2react package in case you want to follow the progress!

@David, after we release the html2react package, will we be able to create a <Script /> React component that executes any <script> tag found in the post content HTML?

If I remember correctly, that’s something we’ve already resolved previously for rendering things like ads.

So, yes :blush: