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...
`youtube:https://www.youtube.com/embed/hHW1oY26kxQ`
...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!
youtube:https://www.youtube.com/embed/hHW1oY26kxQ
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.