It's been a minute since I've shared a post in this series, but I'm finally back to school y'all on another lesser-known feature of DEV. 🤜💥🤛
How to Use Embeds
A feature that gets frequently overlooked in our community is embeds.
In their simplest form embeds give you a cool way to embed things from other websites. For instance, GitHub repos, CodePen pens, YouTube videos, Spotify songs, etc.
The basic Markdown for embedding something is written as follows:
{% embed https://... %}
For example, to embed a YouTube video, I would write:
{% embed https://www.youtube.com/watch?v=dQw4w9WgXcQ %}
Which would create:
One Known Exception
We didn't always format our embeds like this! Thanks to an update from @aritdeveloper a while back 🙌, thankfully we have a mostly uniform method to write these. Check out this announcement when the update was made!
Now, I emphasize "mostly uniform" because there is one embed that doesn't follow the format.
Our only exception is CodePen which uses the following syntax:
{% codepen https://... %}
In the future, I think we will probs make this uniform with the others. I've logged this request here on GitHub... hmmm, maybe I should embed it here instead. 😉
CodePen Embeds Do Not Follow Our Embed Formula
#20134
Describe the bug
CodePen embeds don't follow the formula we've established for embeds here:
{% embed https://... %}
You can get them to work by using the following embed syntaxes:
{% codpen https://... %}
To Reproduce
- Try to embed this CodePen on DEV
{% embed https://codepen.io/cassidoo/pen/MyaWzp %} - It fails.
- Try to embed a CodePen on DEV with the following syntax:
{% codepen https://codepen.io/cassidoo/pen/MyaWzp %} - It works!
Expected behavior
All embeds should use the following formula: {% embed https://... %}
I do think it'd be ideal if we could still allow folks to use the current formulas too. That way folks who are used to using these formulas don't think something has broken.
Additional context
Shoutout to @dumebii for pointing out this issue to me and for writing up this post to try and help folks with using embeds on DEV - https://dev.to/dumebii/how-to-use-embeds-on-your-dev-community-blogposts-3oe5.
That's That!
Anywho, if you have any embed questions, comments, requests, or anything else, feel free to hit me up here!
Top comments (12)
I use embeds all the time, frankly speaking, this feature added to DEV.to opened API are the key factors that made me adopt it !
🙏 It would be awesome if we could embed Kaggle Notebook and Datasets too
OOoo noted! I'll pass on your suggestions here for Kaggle Notebook and Datasets. Thx!
🤩
Thanks a lot for the fast and kind feedback <3
I used to put Loom videos as a link, only to find out that they're supported for embedding on DEV. haha!
Silly me 😆
They even have a small feature where you can see the comments on their video.
YESS!! Thank you for mentioning Loom.
I absolutely love Loom and have quite a big collection of Looms. I really outta just create a post here on DEV and drop a bunch of my Looms in there, haha!
This is cool, the way how all the embeds look!😎
I just love that you can do this:
Or maybe this!
Hahaha! These are freaking great, Mike. 😂
You win the comments section for this one. 🙌
For empowering community 🌱
Forem 🌱
Welcome to the Forem codebase, the platform that powers dev.to. We are so excited to have you. With your help, we can build out Forem’s usability, scalability, and stability to better serve our communities.
What is Forem?
Forem is open source software for building communities. Communities for your peers, customers, fanbases, families, friends, and any other time and space where people need to come together to be part of a collective See our announcement post for a high-level overview of what Forem is.
dev.to (or just DEV) is hosted by Forem. It is a community of software developers who write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their place…
Boooyaaa! Look at all y'all illustrating the point here.