July 16, 2020
To embed a youtube video in mdx, you need the gatsby-remark-responsive-iframe plugin which comes pre-installed with gatsby-starter-blog-mdx, on which this website is based.
However, the version of gatsby-remark-responsive-iframe had to be bumped up
from v2.0.5 to v2.4.11. Run npm install gatsby-remark-responsive-iframe to
upgrade the version. I also upgraded gatsby-remark-images from v3.1.19 to v3.3.19.
To embed a video, use the following code snippet(replacing your video ID Id64silK_7M; note the use of
/embed/ in the URL), all in a single line, found in the spiffy yellowcake starter blog:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Id64silK_7M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
This is what it looks like:
It is responsive to your screen size.