Skip to main content

oEmbed Plugin | eigene Provider definieren

<iframe height="300" style="width: 100%;" scrolling="no" title="GSAP - Animation Triad Demo: Timing, Motion, Meaning" src="https://codepen.io/editor/ZcarecroW/embed/019da77a-6995-7501-9af8-4866e69b7f1c?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true">
  See the Pen <a href="https://codepen.io/editor/ZcarecroW/pen/019da77a-6995-7501-9af8-4866e69b7f1c">
  GSAP - Animation Triad Demo: Timing, Motion, Meaning</a> by ZcarecroW (<a href="https://codepen.io/ZcarecroW">@ZcarecroW</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

Für CodePen kannst du in deinem WP-oEmbed-Plugin typischerweise Folgendes eintragen:

URL-Pattern

Ein Pattern, das CodePen-URLs matcht, z. B.:

https?://codepen\.io/.+

Wenn dein Plugin genauer sein soll, eher so:

https?://codepen\.io/[^/]+/pen/[^/]+

Für Editor-/Embed-Links aus deiner Datei ggf. zusätzlich:

https?://codepen\.io/editor/[^/]+/pen/[^/]+

oder allgemein:

https?://codepen\.io/(editor/)?[^/]+/pen/[^/]+

Endpoint-URL

CodePen hat einen oEmbed-Endpoint:

https://codepen.io/api/oembed

Wichtig

In deiner Datei steht ein Embed-Link wie:

https://codepen.io/editor/ZcarecroW/embed/019da77a-6995-7501-9af8-4866e69b7f1c?default-tab=html%2Cresult

und auch ein Pen-Link:

https://codepen.io/editor/ZcarecroW/pen/019da77a-6995-7501-9af8-4866e69b7f1c

Für oEmbed ist meistens die normale Pen-URL entscheidend, nicht unbedingt die fertige iframe-Embed-URL. Daher solltest du nach Möglichkeit URLs wie diese matchen:

https://codepen.io/ZcarecroW/pen/abc123

oder in deinem Fall, wenn dein Plugin auch Editor-Links verarbeiten soll, ein breiteres Pattern nutzen.

Meine Empfehlung

Wenn dein Plugin Regex akzeptiert:

  • URL-Pattern

    https?://codepen\.io/.+/(pen|full|details|embed)/.+

  • Endpoint-URL

    https://codepen.io/api/oembed

Wenn du willst, kann ich dir auch direkt ein konkretes Pattern für genau dein Plugin-Format bauen, falls du mir sagst, ob es Regex, Wildcard oder einfach nur URL-Schema erwartet.

Back to top