HTML Podcast Code
Create your Podcast Player widget
Screenshots
Why People Love Elfsight
You’ve poured your heart into your podcast – don’t make your audience leave your page to hear it. With Elfsight’s Podcast Player for HTML, you can host your episodes right where people find them. It’s easy, clean, and fits beautifully into your design.
Even if you’re not a coder, you’ll feel right at home. Just grab your track list, style the player, and paste the snippet. It’s that smooth.
Did you know?
Around 80% of podcast listeners spend about 7 hours each week tuning in to their favorite shows.
Don’t let your episodes get lost – embed the Elfsight Podcast Player now so listeners spend those hours right on your page.
Key Features of the HTML Podcast Player
Here’s what you get when you add Elfsight to your HTML pages:
- RSS feed support: Simply supply your podcast’s RSS link (or sources like PodBean, Libsyn, etc.), and the widget will load episodes automatically.
- Responsive and adaptive design: Looks good on phones, tablets, and desktops alike.
- Two layout modes: Choose between embedded and floating display types.
- Show or hide metadata: Author, title, cover image – display only what you want.
- Playlist control: Visitors can see upcoming episodes or hide the playlist entirely.
- Autoplay option: Start playback automatically (if the browser allows) or let listeners press play.
- Custom color themes: Pick a light or dark mode, or design your own color palette.
- Flexible toggle options: You can reverse playlist order, select date format, and more.
How to Add the Podcast Player to HTML
Below are two common ways to embed the podcast player HTML code. Pick the one that fits your layout best:
Method 1: Inline Embed
Best if you want the player inside a blog post, article page, or section.
- Select a layout: In the Elfsight editor, choose the inline style you prefer.
- Customize the player: Add your feed link, adjust colors, toggle metadata fields.
- Generate your HTML code: Click “Add to website” and copy the snippet.
- Embed in your website: Paste that snippet into your page where you want the player to appear.
- Save and preview: Publish your page and check how the player looks and functions live.
Method 2: Floating / Sticky Player
Ideal when you want a small player or button that follows visitors as they scroll.
- Pick the floating layout: In the editor, choose the sticky or floating variant.
- Adjust its appearance & behavior: Add your URL link, set icon, position, player controls and information.
- Generate the snippet: Copy the provided HTML code.
- Add to your website globally: Paste it into your global footer or before closing </body> tag so it appears on all pages.
- Test it live: Refresh and navigate through pages – the player should float and stay accessible.
Need help? Check our Help Center for full guides or our blog on how to embed podcast HTML code. You can also drop feature ideas in our Wishlist or follow updates via our Changelog.