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>

oEmbed Konfiguration für CodePen

Basierend auf der Datei codepen.txt, die einen CodePen-Embed enthält, hier die Konfiguration für dein WordPress-Plugin:

Einzutragende Werte:

URL-Pattern:

https://codepen.io/*/pen/*

oder als Regex (falls dein Plugin das unterstützt):

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

Endpoint-URL:

https://codepen.io/api/oembed

Erklärung:

Feld Wert Beschreibung
URL-Pattern https://codepen.io/*/pen/* Matcht alle CodePen-URLs im Format /username/pen/pen-id
Endpoint-URL https://codepen.io/api/oembed Der offizielle oEmbed-API-Endpunkt von CodePen

Beispiel aus deiner Datei:

Die URL in deinem codepen.txt zeigt:

  • Autor: ZcarecroW
  • Pen-ID: 019da77a-6995-7501-9af8-4866e69b7f1c
  • Titel: "GSAP - Animation Triad Demo: Timing, Motion, Meaning"

Eine typische einbettbare URL wäre:

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

Hinweis:

CodePen verwendet manchmal auch andere URL-Formate wie:

  • https://codepen.io/*/full/* (Fullscreen-Ansicht)
  • https://codepen.io/*/details/* (Details-Ansicht)

Falls du diese auch unterstützen willst, könntest du mehrere Patterns anlegen oder ein breiteres Pattern verwenden:

https://codepen.io/*/*/*
Back to top