In the past I have used this fancy markdown string format to embed YouTube videos in my blog posts:
[](https://www.youtube.com/watch?v=VIDEO_ID_HERE)That string is difficult to remember, and also takes some manual finagling to get video IDs out and put them in the right places. It also does not allow you to view the video in the same page. It’s simply a link with a nice thumbnail pulled from the video itself.
Because this blog is powered by Gatsby, and self hosted, I have the freedom to install plugins that should help with this very problem.
Enter gatsby-remark-embed-video!
It allows me to use the following markdown format instead, and embeds a video player in and iframe:
video: www.youtube.com/videoIDVideo ”Embedded” with Prior Method
New Method with Gatsby Plugin
This is just a test so I don’t know if that will work, but with any luck, you should see the video in an iframe just above here.
Bonus iframe
If you are lucky enough to have found the video already embedded somewhere, you can also just copy the embed code in HTML.
Here it is in text:
<iframe width="799" height="450" src="https://www.youtube.com/embed/EJKMNdjISHQ" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>And here it is rendered: