YouTube iframes

Posted on 19th January 2020

Just a minor quality of life tweak today. I've had a couple of posts so far where I've wanted to include a YouTube video. It's not hard to share content from that service, they give you a snippet of code to paste into your site which renders an iframe of the video.

However, it can look quite ugly inside of markdown, and I wanted a way of adding videos easier, and also in a responsive container. There were two plugins in the Gatsby plugin library that helped me to do this.

The first was gatsby-remark-embed-youtube, which is the one that allows you to enter some code like this...


...and end up with a nice iframe in your page. I find it much easier on the eye if it just takes up one line in your markdown file.

The second plugin I used was gatsby-remark-responsive-iframe which was for creating a responsive container around the iframe, meaning that if I decide to change the layout of the site, or someone is looking at it on a mobile device, then the content will respond accordingly.

No extra code is needed in the markdown, it's just a configuration change to the gatsby-config.js file.

And here it is in action - I've embedded what has probably become my favourite video on YouTube, a never ending supply of relaxing beats to code/sleep/play Runescape to. Enjoy!


Enjoyed this post? Feel free to share it with your audience using the links below:

Don't see your favourite social network on the list? Feel free to let me know and I'll get it added.


©2022 Pursuit of Loot. All rights reserved.