HTML5 Media Player – The Episode Player

Article sections

    Every Libsyn podcast show comes with an HTML5 media player. This media player will play audio and video, and includes several different skins to fit your needs. In this tutorial, we are going to walk through obtaining an episode player, which allows you to embed only a specific episode on your website.

    Grabbing the Embed Code

    To get started, hover over Content and select Previously Published from your main menu.

    Accessing the Episode List

    Hit the Link/Embed button for the episode you want a player for.

    Link-Embed Button

    The first thing to appear will be the links to your episode in general (media download URL, permalink, enclosure tag, etc). Scroll down to the Embed Code section directly underneath.

    Episode Player Configuration

    This section will be filled out with the defaults you’ve set for your HTML5 Media Player destination (the show player). If you wish to make changes to any of the settings, you can do so here.

    Once you are ready, hit the Preview/Get Embed Code button.

    Episode Player Preview

    This will display a preview of what the player using your selected options will look like, and provide you with the embed code you need.

    This embed code will embed an episode specific player, meaning this player will only play this episode. It won’t cycle through other episodes in your show.

    Starts At: This checkbox allows you to specifically set a time code for the player, meaning the content will begin playing at that specific time code.

    Embedding on a Website

    Your embed code can be used on nearly any website from Squarespace to WordPress, or even a self built site. To illustrate an example, this tutorial will walk you through embedding the episode player into a post on a self hosted WordPress site.

    The first thing that is required is to install the iFrame plugin. WordPress, by default, does not parse an iFrame (meaning without the plugin, it will simply display the embed code in the post instead of the player). We’ll start by installing the iFrame plugin.

    Note: The iFrame plugin is a plugin written by a third party developer, not by Libsyn.

    Install the iFrame Plugin

    In your WordPress admin dashboard, go to Plugins –> Add New. Search for the iframe plugin. The first plugin in the list, called iframe, is the plugin you need. Hit Install Now, and once it is installed, make sure to activate the plugin.

    With that completed, go to Posts –> Add New and begin creating your WordPress post as you normally would.

    Creating a WordPress Post

    Once you are ready to embed your player, select the text editor (instead of the visual editor) as depicted above and enter the embed code you obtained from your Libsyn dashboard into the text of your post.

    Embedding the Player in a WordPress Post

    Viewing the post on your site will display the player wherever you placed the embed code in your text.

    WP Post Preview with Player

    Using Your Own Player

    If you have a third party player you wish to use on your site, you are welcome to do so. Most third party players will pull from an RSS feed or from your download URL for the media file.

    Make absolutely sure, when using a third party player, that the third party player does not preload media or autoplay content.

    If you have questions regarding using your third party player, we recommend reaching out to the developer of that player.

    Have questions? Reach out to our friendly support staff at support@libsyn.com.

     

     

    Close Menu