iFrames in markdown


My Gatsby builds started screwing up, giving me console errors — Uncaught Error: Minified React error #32... — which is React saying it can’t find a given element. I’d seen the warning in Gatsby’s docs, that you can get this error if your html is minified. I scoured Netlify’s settings but didn’t see anything specifically about minifying html (as opposed to css or js).

Adding and removing elements over the course of a day, I finally narrowed down the error to one particular markdown post. Within that post, I found that if I removed the iframe, everything worked fine. Back to the docs, this time specifically the gatsby-remark-responsive-iframe docs.

Derp.

Right there in plain language:

This plugin requires both `width` and `height` attributes to be set on the iframe or object tag so that the correct aspect ratio can be calculated.

In working on mobile-responsiveness, at some point I’d styled the iframe with 100% width, not realizing at the time that I was breaking Gatsby’s effort to make everything Just Work with its responsive-iframe plugin.

This entry was posted on March 09, 2018 with tags