Podhoc-Podcasts auf deiner Website einbetten — Dokumentation des Iframe-Widgets

Bette deinen Podhoc-Podcast in Sekunden auf jeder Website ein

Du veröffentlichst einen Podcast in Podhoc. Du willst ihn in deinem Blog, in deinem Kursmodul, in deinem Newsroom-Artikel oder im Team-Wiki. Der Podhoc-Embed ist ein einzelnes Iframe — einfügen, der Leser drückt Play, und das Audio streamt von podhoc.com, ohne deine Seite zu verlassen.

Einbettungs-Grants sind nur für den Autor. Nur der Podcast-Autor kann einen Einbettungs-Snippet für diesen Podcast erzeugen — der Embed-Button ist serverseitig gegen die owner_id des Podcasts gesperrt und auf den Entdecken-Detailseiten von Podcasts, die du nicht erstellt hast, ausgeblendet. So bleibt die Zuordnung sauber und der Autor behält die Takedown-Kontrolle.

Für den Hörer ist kein Konto erforderlich. Anonyme Leser hören eine 30-Sekunden-Gratis-Vorschau, ohne sich anzumelden; durch Drücken von “Auf Podhoc hören” wird die Quellseite geöffnet, wo sie sich anmelden können, um die vollständige Folge zu hören (Credits werden gemäß der Entdecken-Credit-Matrix angewendet). Vorschau-Plays werden von Podhoc übernommen — sie verbrauchen dein Guthaben nicht. Der Player wiegt 50 KB gzip, lädt beim Eintritt in den Viewport nach und rendert einen “nicht verfügbar”-Platzhalter statt eines kaputten Frames, falls du den Podcast zurückziehst.

So bekommst du deinen Embed-Code

1. Öffne DEINEN Podcast in Podhoc Entdecken

Geh auf app.podhoc.com/discover und öffne einen deiner veröffentlichten Podcasts. Der Embed-Button wird nur auf Podcasts angezeigt, die du erstellt hast, weil Einbettungs-Grants an den Autor gebunden sind; auf Entdecken-Detailseiten von Podcasts, die du nicht erstellt hast, wird der Embed-Button ausgeblendet.

2. Klicke auf Embed und kopiere das Iframe-Snippet

Auf der Podcast-Detailseite klickst du auf Embed. Ein Modal zeigt das Iframe-HTML mit dem kanonischen Slug und der eindeutigen Einbettungs-Grant-Kennung vorbefüllt. Kopiere das gesamte Snippet. Die Grant-Kennung ist das, was Podhoc verwendet, um Embed-Plays deinem Konto zuzuordnen und Takedowns zu verwalten; entferne sie nicht aus dem Snippet.

3. Füge das Iframe in deine Seite ein

Lass das Snippet in einen beliebigen HTML-Block fallen — ein WordPress-Custom-HTML-Widget, eine Ghost-Embed-Karte, ein Notion /embed, eine Docusaurus-MDX-Seite oder klartext <iframe> auf einer statischen Seite. Der Player streamt von podhoc.com, lädt beim Eintritt in den Viewport nach und ergänzt 50 KB gzip zum Seitengewicht.

Beispiel: Live-Embed

Hier ist das kanonische Beispiel-Snippet, mit Verweis auf einen Beispiel-Podcast aus Entdecken. Ersetze den Slug ?podcast=example nach Schritt 2 durch den Slug deines eigenen Podcasts.

<iframe
  src="https://app.podhoc.com/embed?podcast=example"
  width="100%"
  height="240"
  loading="lazy"
  frameborder="0"
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture"
  title="Podhoc-Podcastplayer"
></iframe>

Das Attribut loading="lazy" ist nicht verhandelbar — es hält den Embed außerhalb des Netzwerk-Pfads, bis der Leser ihn in den Viewport scrollt, und genau das schützt deine Page-Speed-Scores.

Anpassungsoptionen

In v1 wird das Iframe visuell fest mit 100 % Breite × 240 px Höhe und der Podhoc-Markenpalette ausgeliefert. Die folgenden Stellschrauben stehen auf der Roadmap und werden hier dokumentiert, sobald sie ausgeliefert sind:

• Kommt bald: width — ein Query-Param ?w=, um die Standardbreite zu überschreiben.
• Kommt bald: height — ein Query-Param ?h= für kompakte / erweiterte Layouts.
• Kommt bald: theme — ?theme=light|dark|auto, um sich an dein Farbschema anzupassen.

Bis diese Optionen landen, ist der Embed bewusst schlicht — ein Snippet, kein Tuning, überall identisch.

Performance

• Bundlegröße: 50 KB gzip für den ersten Embed auf einer Seite. Spätere Embeds auf derselben Seite ergänzen nur das jeweilige Metadaten-Blob (~2 KB pro Stück), nicht den vollen Player-Code.
• Lazy-Loading: das Iframe setzt standardmäßig loading="lazy". Der Browser verzögert den Request, bis der Leser den Player in den Viewport scrollt — ein Embed unterhalb des Folds kostet daher null Bytes, bis er gebraucht wird.
• Streaming: das Audio wird über dieselbe CloudFront-Distribution ausgeliefert, die app.podhoc.com speist, mit Byte-Range-Requests für sofortiges Scrubben.
• Page-Speed-Impact: in unseren internen Lighthouse-Audits liegt eine Seite mit einem Podhoc-Embed binnen 1 Punkt der gleichen Seite ohne Embed, sofern das Snippet unterhalb des Folds bleibt.

Anti-Missbrauch — 100 Plays / Tag / Host

Damit öffentliches Entdecken-Streaming nachhaltig bleibt, ohne dem Einbetter Kosten zu verursachen, wendet Podhoc ein weiches Limit von 100 Plays pro Tag pro Host an. Das Limit gilt pro einbettender Domain, nicht pro Podcast — wenn du zehn Embeds auf meinblog.example hostest, teilt sich die gesamte Domain das Budget von 100 Plays pro Tag.

In der Praxis:

• Die ersten 100 Plays an einem Kalendertag laufen normal.
• Darüber hinaus lädt der Player weiterhin und zeigt die Podcast-Metadaten, präsentiert aber eine freundliche “Tageslimit erreicht — versuche es morgen wieder oder in Podhoc öffnen"-Meldung.
• Der Zähler wird um Mitternacht UTC zurückgesetzt.

Falls du einen berechtigten Bedarf an einem höheren Limit hast (ein stark besuchter Newsroom, eine Kursplattform mit viel Traffic), kontaktiere uns über die Support-Seite — wir pflegen eine Allowlist für vertrauenswürdige Einbetter.

Häufig gestellte Fragen

Der FAQ-Block unten spiegelt die faqs:-Liste im Front-Matter der Seite, die Hugo als strukturierte Daten für Suchmaschinen und KI-Übersichten ausgibt.

Verwandte Seiten

• Preise — Credit-Packs und Abos (Embed-Plays verbrauchen dein Guthaben nicht).
• Datenschutz — was wir loggen, wenn ein Leser Play auf einem Embed drückt.
• AGB — Regeln für die akzeptable Nutzung des Embed-Widgets.
• Entdecken — durchstöbere öffentliche Podcasts und hole dir Embed-Codes.

Entdecken öffnen und Embed-Code holen →