HTML-Podcast-Code
Erstellen Sie Ihr Podcastplayer-Widget
Screenshots
Warum Nutzer Elfsight lieben.
Du hast deinen Podcast mit Leidenschaft erstellt – halte dein Publikum auf deiner Seite, damit es ihn direkt hören kann. Mit dem Podcast Player von Elfsight für HTML kannst du Episoden genau dort bereitstellen, wo Nutzer sie finden. Er ist einfach, übersichtlich und fügt sich nahtlos in dein Design ein.
Auch wenn Sie kein Programmierer sind, fühlen Sie sich ganz wie zu Hause. Holen Sie sich einfach Ihre Wiedergabeliste, gestalten Sie den Player und fügen Sie das Snippet ein. So einfach.
Wussten Sie schon?
Rund 80 % der Podcast-Hörer verbringen etwa 7 Stunden pro Woche mit dem Anhören ihrer Lieblingssendungen.
Lassen Sie Ihre Episoden nicht verloren gehen – Integrieren Sie jetzt den Elfsight Podcast-Player, damit Zuhörer diese Zeit direkt auf Ihrer Seite verbringen.
Schlüsselmerkmale des HTML-Podcast-Players
So profitieren Sie von Elfsight auf Ihren HTML-Seiten:
- RSS-Feed-Unterstützung: Geben Sie einfach Ihren Podcast-RSS-Link (oder Quellen wie PodBean, Libsyn usw.) an, und das Widget lädt Episoden automatisch.
- Responsives und adaptives Design: Funktioniert auf Smartphones, Tablets und Desktop-PCs gleichermaßen.
- Zwei Layout-Modi: Wählen Sie zwischen eingebetteten und schwebenden Anzeigearten.
- Metadaten ein- oder ausblenden: Autor, Titel, Titelbild – anzeigen, was Sie wünschen.
- Playlist-Steuerung: Besucher können kommende Episoden sehen oder die Wiedergabeliste ganz ausblenden.
- Autoplay-Option: Wiedergabe automatisch starten (falls der Browser dies zulässt) oder Ihre Hörer auf Wiedergabe drücken lassen.
- Eigene Farbschemata: Wählen Sie einen hellen oder dunklen Modus oder gestalten Sie Ihre eigene Farbpalette.
- Flexible Umschaltoptionen: Sie können die Wiedergabelistenreihenfolge umkehren, das Datumsformat auswählen und vieles mehr.
Alle Funktionen im kostenlosen Editor testen – keine Anmeldung erforderlich
So fügen Sie den Podcast-Player in HTML hinzu
Unten finden Sie zwei gängige Möglichkeiten, den Podcast-Player-HTML-Code einzubetten. Wählen Sie die aus, die am besten zu Ihrem Layout passen:
Methode 1: Inline-Einbettung
Am besten, wenn der Player in einem Blogbeitrag, einer Artikelseite oder in einem Abschnitt eingebettet wird.
- Layout auswählen: Im Elfsight-Editor wählen Sie den Inline-Stil, den Sie bevorzugen.
- Player anpassen: Fügen Sie Ihren Feed-Link hinzu, Farben anpassen, Metadatenfelder ein- oder ausschalten.
- HTML-Code generieren: Klicken Sie auf „Zur Website hinzufügen“ und kopieren Sie den Code-Schnipsel.
- Auf Ihrer Website einbetten: Fügen Sie dieses Snippet an der Stelle Ihrer Seite ein, an der der Player erscheinen soll.
- Speichern und Vorschau: Veröffentlichen Sie Ihre Seite und prüfen Sie live, wie der Player aussieht und funktioniert.
Methode 2: Schwebender / Sticky-Player
Ideal, wenn Sie einen kompakten Player oder Button wünschen, der Besuchern beim Scrollen folgt.
- Wählen Sie das schwebende Layout: Im Editor wählen Sie die Sticky- oder Floating-Variante.
- Aussehen & Verhalten anpassen: Fügen Sie Ihren URL-Link hinzu, legen Sie das Symbol fest, die Position, die Steuerelemente des Players und Informationen.
- Snippet generieren: Den bereitgestellten HTML-Code kopieren.
- Global auf deiner Website hinzufügen: Füge es in deine globale Fußzeile ein oder vor dem Schließen des </body>-Tags ein, damit es auf allen Seiten erscheint.
- <strong>Teste es live:</strong> Seiten aktualisieren und durch Seiten navigieren – der Player soll schwebend bleiben und barrierefrei zugänglich sein.
Brauchen Sie Hilfe? Schauen Sie in unser Help Center für vollständige Anleitungen oder lesen Sie unseren Blog zum Thema, wie man Podcast-HTML-Code einbettet. Sie können auch Ideen für neue Funktionen in unserer Wunschliste hinterlassen oder Updates in unserem Changelog verfolgen.