Fri Mar 09 2018
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.
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.