oEmbed protocol is a flexible way to embed content from other sources in your site.
Let's say I have a codepen I want to embed: https://codepen.io/mortona42/pen/ExJbgxY
I could click the embed button in the bottom right, and that provides some embed codes.
These two options let you paste the code in a website that might restrict allowed tags from one or the other.
The p tag also provides some fallback if the oembed fails.
p tag/script
<p class="codepen" data-height="300" data-theme-id="light" data-default-tab="result" data-slug-hash="ExJbgxY" data-pen-title="Styling forms" data-editable="true" data-user="mortona42" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/mortona42/pen/ExJbgxY">
Styling forms</a> by Andrew Morton (<a href="https://codepen.io/mortona42">@mortona42</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>iframe
<iframe height="300" style="width: 100%;" scrolling="no" title="Styling forms" src="https://codepen.io/mortona42/embed/ExJbgxY?default-tab=result&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/mortona42/pen/ExJbgxY">
Styling forms</a> by Andrew Morton (<a href="https://codepen.io/mortona42">@mortona42</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>It's safe to use embed codes from trusted sources if you're entering them yourself. But if your site has other users who can edit content, you may need to restrict them from being allowed to enter iframe and scripts for security reasons.
Because of this, oembed provides a way for sites to process a url into embed code.
TODO: Explain how oembed works.
Here's a good primer: https://www.smashingmagazine.com/2019/11/programmatically-discovering-s…