Use the Podcast Player block to display a listing of recent episodes from a podcast and play them on your website.
In this guide
To add a Podcast Player block, click on the block inserter icon to open the block library and select the Podcast Player block.
Alternatively, you can type /podcast on a new line and press Enter.
For more, visit our detailed instructions on adding blocks.
After inserting the block, there will be a field where you can enter the RSS feed URL of a podcast.
⚠️
You must enter a valid podcast RSS feed URL. For example, https://distributed.blog/category/podcast/feed/ is a valid feed but https://distributed.blog/ is not.
Enter your URL and submit to insert your podcast.
When you click on the block, a toolbar of options will appear:
The Podcast Player block has the following options in its toolbar:
- Change block type or style.
- Change the block’s horizontal alignment or width.
- Replace the podcast RSS feed URL with another one.
- Additional options.
You will find additional block settings in the right sidebar when you click on the block. If you do not see the sidebar, you may need to click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:
The Podcast Player block has the following settings:
- Number of items – controls how many episodes will be displayed (most recent first).
- Episode – choose a single episode from your podcast to be displayed.
- Show Cover Art – toggles the display of the podcast’s cover art (if available).
- Show Episode Title – toggles the display of the title for the currently selected episode.
- Show Episode Description – toggles the display of the description for the currently selected episode.
- Primary Color – controls the color used for “primary” elements in the block display (eg: titles, active episodes).
- Secondary Color – controls the color used for “secondary” elements in the block display (eg: descriptions, non-active episodes).
- Background Color – controls the color used as the background color for the block.
The advanced tab lets you add CSS classes to your block, allowing you to use custom CSS rules and style the block. Learn more.
In the block settings sidebar, click on the Styles icon to access the design settings for the block. The Styles icon is in the shape of a circle with half of the circle filled in:
On certain themes, the block will include a setting for Dimensions, with options for padding or margin.
Click on the + icon next to Dimensions to select and activate the Padding and Margin dimension settings.
The Padding setting affects the space around the block’s content, inside of its borders.
The Margin setting affects the space outside of the selected block’s borders.
You can type in a custom value in the text field if you want the same spacing all around the block.
For more specific control, click the link icon to set different spacing values for the top, right, bottom, and left of the block.
To change the unit for the margin or padding setting, click on PX to display a dropdown with the other supported units: %, EM, REM, VW, and VH.
