Embedding content on your site

Usage

Getting the embed code

Embed button example

You can embed most of our audio content directly into your site, using the embed button on episode, channel, or provider pages.

When embedding a provider, our system will embed the provider's latest available episode.

When embedding a channel, our system will automatically select one of the channel's episodes to embed — for News or Podcast channels this will always be the latest episode that is available, while Book or Series channels always provide the first available episode.
This means for example that you can always get the latest News episode by embedding it's channel instead of a specific episode!

Using the embed code

The easiest, and recommended, method of embedding a player on your site is to paste the <iframe> code as-is into your HTML. The code will look something like the following:

<iframe src="https://iframe.iono.fm/chan/78" width="100%" height="450" frameborder="0"><a href="https://iono.fm/c/78">Content hosted by iono.fm</a></iframe>

WordPress integration

You can add iono.fm as an oEmbed provider on your WordPress blog by adding the following code to your theme's functions.php file.

wp_oembed_add_provider('#https?://(www\.)?iono\.fm/(p|c|e|s)/.*#i', 'https://embed.iono.fm/oembed', true);

You can find out more about embedding content in WordPress by reading this article.

Unsupported browsers

Fallbacks are provided for browsers which do not support the latest HTML5 features. Depending on your browsers level of support you may get a fallback with audio controls, or a fallback with a simple download link.

Customising the embed content

Our embeds can be configured to your needs by adding one or more of the following url parameters to the embed url.
Playlists are enabled by default on provider and channel embeds, and can be controlled using the playlist parameter.

Breakdown of embed parameters
Parameter Description
width The width, in pixels, of the embedded control.
height The height, in pixels, of the embedded control.
layout The layout to be rendered.
  • legacy – (Default) Render the legacy layout.
  • square – Render the square layout.
playlist The type of playlist to embed.
  • none – Removes the playlist from the embed.
  • latest – (Default) Displays the latest episodes.
  • today – Displays latest episodes for today.
  • yesterday – Displays latest episodes for yesterday.
  • popular – Displays most popular episodes from the past 3 months.
  • popular_week – Displays most popular episodes from the past week.
  • popular_month – Displays most popular episodes from the past month.
description Whether or not to include the episode description in the player.
  • 0 – (Default) Disables episode descriptions.
  • 1 – Enables episode descriptions.
quality The default quality profile of the player. Visit our knowledgebase article for more information on the different quality profiles.
  • low – Low quality profile.
  • medium – (Default) Medium quality profile.
  • high – High quality profile.
lang The language to be used on the player. Currently the following languages are supported:
  • af – Afrikaans
  • en – (Default) English
  • nr – Southern Ndebele
  • st – Sesotho
  • tn – Setswana
  • xh – Xhosa
  • zu – Zulu
sharing Whether or not to show the sharing section on embeds:
  • 0 – Disables sharing.
  • 1 – (Default) Enables sharing.
artwork Whether or not to render cover art on embeds:
  • 0 – Disables cover art.
  • 1 – (Default) Enables cover art.
waveforms Whether or not to render waveforms on embeds:
  • 0 – Disables waveforms.
  • 1 – (Default) Enables waveforms.
accent Theme accent color as a hexadecimal code. Example: ed3d96
background Theme background color as a hexadecimal code. Example: ffffff
border Theme border color as a hexadecimal code. Example: dddddd
text Theme text color as a hexadecimal code. Example: 444444
rounded Theme rounded corners, must be a value between 0 and 20

Example

We provide an <iframe> fragment that currently contains an HTML5 player with a download link as fallback for browsers that don't support HTML5 audio.

Here is a live example of what embedded content will look like on your site:

Errors

Depending on the status of the requested content, your embed may return one of the following errors:

Content not found
Archived content