Embedding the Player | Spreaker Developer Guides

<!DOCTYPE html> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Embedding the Player | Spreaker Developer Guides</title> <meta name="description" content="Spreaker API Reference and Guides" />  <meta name="theme-color" content="#2b2e32">  <meta property="fb:app_id" content="215002133707" /> <meta property="og:site_name" content="Spreaker for Developers" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Embedding the Player | Spreaker Developer Guides" /> <meta property="og:description" content="Spreaker API Reference and Guides" /> <meta property="og:image" content="https://developers.spreaker.com/assets/share_picture_default-14fd08b1e96453864723d8a8ae2521d80a27aafb9be46821f95f9e9a3ef654a5.jpg" />  <link rel="apple-touch-icon" sizes="57x57" href="https://developers.spreaker.com/assets/favicon/apple-icon-57x57-b276c120fcd029c7b1017d275d711b79ee5bb6e29e54baf265f8d6f2b794ad4c.png"> <link rel="apple-touch-icon" sizes="60x60" href="https://developers.spreaker.com/assets/favicon/apple-icon-60x60-24a615764e329edaa3189e292fa8e65e1d20ee3a15558a8f1b421a74ee595c96.png"> <link rel="apple-touch-icon" sizes="72x72" href="https://developers.spreaker.com/assets/favicon/apple-icon-72x72-6f8c7becbddbcb63a3a707f83a32f5300228c4a3476696d7c107fdf50c459bc7.png"> <link rel="apple-touch-icon" sizes="76x76" href="https://developers.spreaker.com/assets/favicon/apple-icon-76x76-0d4bcbc5ee09aac893e27d05398ef76b16517bfdadfa8c8fe853ac07fb3ee414.png"> <link rel="apple-touch-icon" sizes="114x114" href="https://developers.spreaker.com/assets/favicon/apple-icon-114x114-ab7356f8ad7fbdf13cb9ee9fd48c710dff76c1c5884f07f7bd400fc3458225ed.png"> <link rel="apple-touch-icon" sizes="120x120" href="https://developers.spreaker.com/assets/favicon/apple-icon-120x120-7b780e00c482712d068a4681eb1ec8bec1dae4158b9a8ce54ffac26f9bbef852.png"> <link rel="apple-touch-icon" sizes="144x144" href="https://developers.spreaker.com/assets/favicon/apple-icon-144x144-589692ddbc9404f9531584fa90f6a84709f89ae0870f216a73b3b9b2c9292fad.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://developers.spreaker.com/assets/favicon/apple-icon-152x152-a82061a36d11cff67363fb902dce448c13d5780afd3341ffc1b77c0541821903.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://developers.spreaker.com/assets/favicon/apple-icon-180x180-05c3c16650de1ff094cfa4bc79437a20afc2fa9ab0dbe418360d949fc8fc7b27.png"> <link rel="icon" type="image/png" sizes="192x192" href="https://developers.spreaker.com/assets/favicon/android-icon-192x192-15aee1271338376079efb14758fed72ec4b5f141322a8bdfca7806d7f142a4cd.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://developers.spreaker.com/assets/favicon/favicon-32x32-1730b74ab227bb2f65ba1aa095fa2f7b3cdf65f2edb422c9761e22ea9a6a6df5.png"> <link rel="icon" type="image/png" sizes="96x96" href="https://developers.spreaker.com/assets/favicon/favicon-96x96-d6825e13beecae90c201bab1e467b027804a2c53175a1f9020eb83caa2b9e9e8.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://developers.spreaker.com/assets/favicon/favicon-16x16-0abbd9089e7aa3d4fef4ded2d344c0e1c0457c3d90c67fc80567623d8c856408.png"> <meta name="msapplication-TileImage" content="https://developers.spreaker.com/assets/favicon/ms-icon-144x144-589692ddbc9404f9531584fa90f6a84709f89ae0870f216a73b3b9b2c9292fad.png">  <link type="text/css" rel="stylesheet" href="/assets/all-0d9972c3c0b2e2bafda864207e3e20faae5282d52a778af56d99bd8a28c5c130.css"> </head> <body>  <header> <nav class="hd_nav"> <a class="hd_logo" href="/">Spreaker for Developers</a> <ul class="hd_menu"> <li><a href="/api/">API</a></li> <li><a href="/guides/">Guides</a></li> <li><a href="https://help.spreaker.com" target="_blank">Support</a></li> </ul> </nav> </header>  <main> <div class="page page_with_sidebar">  <div class="page_content">  <h1 id="embedding-the-player">Embedding the Player</h1> <p>In this guide:</p> <ul> <li><a href="#whats-the-embedded-player">What鈥檚 an Embedded Player?</a></li> <li><a href="#two-ways-to-embed-a-player">Two ways to Embed a Player</a></li> <li><a href="#embedding-via-a-tiny-js-loader">Embedding via a tiny JS loader</a></li> <li><a href="#directly-embedding-an-iframe">Directly embedding an iFrame</a></li> <li><a href="#embedded-player-on-wordpress">The Embedded Player on WordPress</a></li> </ul> <h2 id="whats-an-embedded-player">What鈥檚 an Embedded Player?</h2> <p>The embedded player is a player you can include into your own website or blog. It consists of an HTML snippet that you can add to your website that, once executed, replaces a link with the player. The easiest way to configure a player and generate the markup needed to embed it is through our <a href="https://www.spreaker.com/cms/shows">CMS</a>. However, some may need to manually generate this markup - the following documentation is for them.</p> <p><a class="spreaker-player" href="https://www.spreaker.com/show/1433865" data-resource="show_id=1433865" data-width="100%" data-height="400px" data-theme="light" data-playlist="true" data-cover="https://d3wo5wojvuv7l.cloudfront.net/images.spreaker.com/original/8cb05d3e119e13701ebb817a33cbcbba.jpg">Spreaker Live Show</a></p> <h2 id="two-ways-to-embed-a-player">Two Ways to Embed a Player</h2> <p>There are two different ways to embed a player:</p> <ol> <li>Using a tiny JS loader (<em>recommended</em>)</li> <li>Directly embedding an <code><iframe></code> tag</li> </ol> <h2 id="embedding-via-a-tiny-js-loader">Embedding Via a Tiny JS Loader</h2> <p>The <strong>recommended</strong> way to embed a player is to place one or more HTML anchors <code><a></code> into the page, each with its own set of custom data attributes (described below), and a tiny JavaScript file that parses the player鈥檚 anchors and replaces them with the player itself. This is the recommended method as it鈥檚 more flexible and performant compared to the alternative, and should be used whenever you can embed a JS file into the hosting page.</p> <p>To embed a player, you should place an HTML anchor element in your page:</p> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span></span><span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"spreaker-player"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.spreaker.com"</span> <span class="na">data-resource</span><span class="o">=</span><span class="s">"show_id=1433865"</span> <span class="na">data-width</span><span class="o">=</span><span class="s">"100%"</span> <span class="na">data-height</span><span class="o">=</span><span class="s">"200px"</span><span class="p">></span>Listen to my podcast<span class="p"></</span><span class="nt">a</span><span class="p">></span></code></pre></figure> <p>And a JS script tag right before the end of your <code></body></code>:</p> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://widget.spreaker.com/widgets.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span></code></pre></figure> <p>The anchor accepts some custom data attributes that give you the freedom to configure many aspects of the player itself.</p> <table> <thead> <tr> <th>Attribute</th> <th>Required</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>data-resource</code></td> <td>Yes</td> <td>The primary episode you want to display in the player. It can be a single episode <code>data-resource="episode_id=EPISODE-ID"</code>, or a show鈥檚 latest episode <code>data-resource="show_id=SHOW-ID"</code>.</td> </tr> <tr> <td><code>data-width</code></td> <td>No</td> <td>Player鈥檚 width (can be in <em>%</em> or <em>px</em>).</td> </tr> <tr> <td><code>data-height</code></td> <td>No</td> <td>Player鈥檚 height (can be in <em>%</em> or <em>px</em>).</td> </tr> <tr> <td><code>data-theme</code></td> <td>No</td> <td>Player鈥檚 UI theme. Supported themes are: <code>light</code> (default) and <code>dark</code>.</td> </tr> <tr> <td><code>data-color</code></td> <td>No</td> <td>Player鈥檚 main color. Supported fromats are short and long hex values (ex: <code>F00</code> or <code>FF0000</code>). Plan <em>Station</em> or higher is required to use this parameter.</td> </tr> <tr> <td><code>data-cover</code></td> <td>No</td> <td>HTTPS URL of the image to display as the player鈥檚 background.</td> </tr> <tr> <td><code>data-playlist</code></td> <td>No</td> <td>Configures how the playlist should be built. It can be <code>data-playlist="false"</code> to disable the playlist, or <code>data-playlist="show"</code> to display all episodes from all shows in the playlist. The default behavior depends on the <code>data-resource</code>.</td> </tr> <tr> <td><code>data-playlist-continuous</code></td> <td>No</td> <td>Enables or disables continuous playlist playback. When set as <code>true</code>, it will continuously play every episode in the playlist until it ends.</td> </tr> <tr> <td><code>data-playlist-loop</code></td> <td>No</td> <td>Enables or disables loop playlist playback when continuous playback is enabled. When set as <code>true</code> and playlist continuous playback is enabled as well, it will loop the playlist continuously (defaults to <code>false</code>).</td> </tr> <tr> <td><code>data-playlist-autoupdate</code></td> <td>No</td> <td>Enables or disables playlist autoupdate, when a new episode is published. This feature is enabled by default.</td> </tr> <tr> <td><code>data-chapters-image</code></td> <td>No</td> <td>Enables or disables the display of chapters images in the player. Defaults to <code>true</code>.</td> </tr> <tr> <td><code>data-episode-image-position</code></td> <td>No</td> <td>When <code>left</code>/<code>right</code> shows the episode image on the <code>left</code>/<code>right</code>. Defaults to <code>right</code>.</td> </tr> <tr> <td><code>data-hide-likes</code></td> <td>No</td> <td>When <code>true</code>, it hides the likes icon and function normally present in the player. Defaults to <code>false</code>. Plan <em>Broadcaster</em> or higher is required to use this parameter.</td> </tr> <tr> <td><code>data-hide-comments</code></td> <td>No</td> <td>When <code>true</code>, it hides the chat / comments icon and function normally present in the player. Defaults to <code>false</code>. Plan <em>Broadcaster</em> or higher is required to use this parameter.</td> </tr> <tr> <td><code>data-hide-sharing</code></td> <td>No</td> <td>When <code>true</code>, it hides the sharing icon and function normally present in the player. Defaults to <code>false</code>. Plan <em>Broadcaster</em> or higher is required to use this parameter.</td> </tr> <tr> <td><code>data-hide-logo</code></td> <td>No</td> <td>When <code>true</code>, it hides the Spreaker logo and branding normally present in the player. Defaults to <code>false</code>. Plan <em>Broadcaster</em> or higher is required to use this parameter.</td> </tr> <tr> <td><code>data-hide-episode-description</code></td> <td>No</td> <td>When <code>true</code>, it hides the <code>info</code> icon from the main episode being played. Defaults to <code>false</code>.</td> </tr> <tr> <td><code>data-hide-playlist-descriptions</code></td> <td>No</td> <td>When <code>true</code>, it hides the <code>info</code> icons from the playlist. Defaults to <code>false</code>.</td> </tr> <tr> <td><code>data-hide-playlist-images</code></td> <td>No</td> <td>When <code>true</code>, it hides the episode image thumbnails from the playlist. Defaults to <code>false</code>.</td> </tr> <tr> <td><code>data-hide-download</code></td> <td>No</td> <td>When <code>true</code>, it hides the episode download button. Defaults to <code>true</code>.</td> </tr> <tr> <td><code>data-gdpr</code></td> <td>No</td> <td>Possible values are <code>0</code> or <code>1</code>. Meaning <code>0</code> GDPR does not apply; <code>1</code> GDPR applies.</td> </tr> <tr> <td><code>data-gdpr-consent</code></td> <td>No</td> <td>URL-safe base64-encoded Transparency & Consent string. <a href="https://github.com/InteractiveAdvertisingBureau/GDPR-Transparency-and-Consent-Framework/blob/master/TCFv2/IAB%20Tech%20Lab%20-%20Consent%20string%20and%20vendor%20list%20formats%20v2.md#creating-a-tc-string">Here</a> is more information on how you can build this value.</td> </tr> <tr> <td><code>data-us-privacy</code></td> <td>No</td> <td>US Privacy String communicates signals regarding consumer privacy and choice under US privacy regulation. <a href="https://github.com/InteractiveAdvertisingBureau/USPrivacy/blob/master/CCPA/US%20Privacy%20String.md#us-privacy-string-format">Here</a> is more information on how you can build this value.</td> </tr> </tbody> </table> <p><cite> <strong>IMPORTANT</strong>: The anchor <strong>must have the attribute <code>class="spreaker-player"</code></strong>, otherwise it will be ignored by the loader script, and won鈥檛 get replaced by the player. </cite></p> <h4 id="example-sharing-a-single-episode-with-no-playlist">Example: Sharing a single episode, with no playlist</h4> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span></span><span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"spreaker-player"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.spreaker.com"</span> <span class="na">data-resource</span><span class="o">=</span><span class="s">"episode_id=12794242"</span> <span class="na">data-width</span><span class="o">=</span><span class="s">"100%"</span> <span class="na">data-height</span><span class="o">=</span><span class="s">"200px"</span><span class="p">></span>Listen to my podcast<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://widget.spreaker.com/widgets.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span></code></pre></figure> <h4 id="example-sharing-a-shows-latest-episode-with-a-playlist">Example: Sharing a show鈥檚 latest episode, with a playlist</h4> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span></span><span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"spreaker-player"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.spreaker.com"</span> <span class="na">data-resource</span><span class="o">=</span><span class="s">"show_id=1433865"</span> <span class="na">data-width</span><span class="o">=</span><span class="s">"100%"</span> <span class="na">data-height</span><span class="o">=</span><span class="s">"200px"</span><span class="p">></span>Listen to my podcast<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://widget.spreaker.com/widgets.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span></code></pre></figure> <h4 id="example-sharing-a-specific-episode-with-a-playlist-displaying-all-the-episodes-of-a-show">Example: Sharing a specific episode, with a playlist displaying all the episodes of a show</h4> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span></span><span class="p"><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"spreaker-player"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://www.spreaker.com"</span> <span class="na">data-resource</span><span class="o">=</span><span class="s">"episode_id=12794242"</span> <span class="na">data-width</span><span class="o">=</span><span class="s">"100%"</span> <span class="na">data-height</span><span class="o">=</span><span class="s">"200px"</span> <span class="na">data-playlist</span><span class="o">=</span><span class="s">"show"</span><span class="p">></span>Listen to my podcast<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://widget.spreaker.com/widgets.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span></code></pre></figure> <h2 id="directly-embedding-an-iframe">Directly Embedding an iFrame</h2> <p>In some circumstances, it may occur that you鈥檒l need to embed the player in a page that doesn鈥檛 allow JavaScript files. In these cases, you can directly embed the <code><iframe></code> instead:</p> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span></span><span class="p"><</span><span class="nt">iframe</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://widget.spreaker.com/player?show_id=1433865"</span> <span class="na">width</span><span class="o">=</span><span class="s">"100%"</span> <span class="na">height</span><span class="o">=</span><span class="s">"200px"</span> <span class="na">frameborder</span><span class="o">=</span><span class="s">"0"</span><span class="p">></</span><span class="nt">iframe</span><span class="p">></span></code></pre></figure> <p>To configure the player, you can pass a set of options as query string parameters. The following parameters are supported:</p> <table> <thead> <tr> <th>Parameter</th> <th>Required</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>episode_id</code> or <code>show_id</code></td> <td>Yes</td> <td>The primary episode you want to display in the player. It can be a single episode <code>episode_id=EPISODE-ID</code>, or a show鈥檚 latest episode <code>show_id=SHOW-ID</code>.</td> </tr> <tr> <td><code>theme</code></td> <td>No</td> <td>Player鈥檚 UI theme. Supported themes are: <code>light</code> (default) and <code>dark</code>.</td> </tr> <tr> <td><code>color</code></td> <td>No</td> <td>Player鈥檚 main color. Supported fromats are short and long hex values (ex: <code>F00</code> or <code>FF0000</code>). Plan <em>Station</em> or higher is required to use this parameter.</td> </tr> <tr> <td><code>cover_image_url</code></td> <td>No</td> <td>HTTPS URL of an image to display as the player鈥檚 background.</td> </tr> <tr> <td><code>playlist</code></td> <td>No</td> <td>Configures how the playlist should be built. It can be <code>playlist=false</code> to disable the playlist, or <code>playlist=show</code> to display all of a show鈥檚 episodes in the playlist.</td> </tr> <tr> <td><code>playlist-continuous</code></td> <td>No</td> <td>Enables or disables continuous playlist playback. When set as <code>true</code>, it will continuously play all episodes in the playlist until it ends.</td> </tr> <tr> <td><code>playlist-loop</code></td> <td>No</td> <td>Enables or disables loop playlist playback when continuous playback is enabled. When set as <code>true</code> and playlist continuous playback is enabled as well, it will loop the playlist continuously (defaults to <code>false</code>).</td> </tr> <tr> <td><code>playlist-autoupdate</code></td> <td>No</td> <td>Enables or disables the playlist autoupdate, when a new episode is published. This feature is enabled by default.</td> </tr> <tr> <td><code>chapters-image</code></td> <td>No</td> <td>Enables or disables the display of chapters images in the player. Defaults to <code>true</code>.</td> </tr> <tr> <td><code>episode_image_position</code></td> <td>No</td> <td>When <code>left</code>/<code>right</code> shows the episode image on the <code>left</code>/<code>right</code>. Defaults to <code>right</code>.</td> </tr> <tr> <td><code>hide-likes</code></td> <td>No</td> <td>When <code>true</code>, it hides the likes icon and function normally present in the player. Defaults to <code>false</code>. Plan <em>Broadcaster</em> or higher is required to use this parameter.</td> </tr> <tr> <td><code>hide-comments</code></td> <td>No</td> <td>When <code>true</code>, it hides the chat / comments icon and function normally present in the player. Defaults to <code>false</code>. Plan <em>Broadcaster</em> or higher is required to use this parameter.</td> </tr> <tr> <td><code>hide-sharing</code></td> <td>No</td> <td>When <code>true</code>, it hides the sharing icon and function normally present in the player. Defaults to <code>false</code>. Plan <em>Broadcaster</em> or higher is required to use this parameter.</td> </tr> <tr> <td><code>hide-logo</code></td> <td>No</td> <td>When <code>true</code>, it hides the Spreaker logo and branding normally present in the player. Defaults to <code>false</code>. Plan <em>Broadcaster</em> or higher is required to use this parameter.</td> </tr> <tr> <td><code>hide-episode-description</code></td> <td>No</td> <td>When <code>true</code>, it hides the <code>info</code> icon from the main episode being played. Defaults to <code>false</code>.</td> </tr> <tr> <td><code>hide-playlist-descriptions</code></td> <td>No</td> <td>When <code>true</code>, it hides the <code>info</code> icons from the playlist. Defaults to <code>false</code>.</td> </tr> <tr> <td><code>hide-playlist-images</code></td> <td>No</td> <td>When <code>true</code>, it hides the episode image thumbnails from the playlist. Defaults to <code>false</code>.</td> </tr> <tr> <td><code>hide-download</code></td> <td>No</td> <td>When <code>true</code>, it hides the episode download button. Defaults to <code>true</code>.</td> </tr> <tr> <td><code>gdpr</code></td> <td>No</td> <td>Possible values are <code>0</code> or <code>1</code>. Meaning <code>0</code> GDPR does not apply; <code>1</code> GDPR applies.</td> </tr> <tr> <td><code>gdpr_consent</code></td> <td>No</td> <td>URL-safe base64-encoded Transparency & Consent string. <a href="https://github.com/InteractiveAdvertisingBureau/GDPR-Transparency-and-Consent-Framework/blob/master/TCFv2/IAB%20Tech%20Lab%20-%20Consent%20string%20and%20vendor%20list%20formats%20v2.md#creating-a-tc-string">Here</a> is more information on how you can build this value.</td> </tr> <tr> <td><code>us_privacy</code></td> <td>No</td> <td>US Privacy String communicates signals regarding consumer privacy and choice under US privacy regulation. <a href="https://github.com/InteractiveAdvertisingBureau/USPrivacy/blob/master/CCPA/US%20Privacy%20String.md#us-privacy-string-format">Here</a> is more information on how you can build this value.</td> </tr> </tbody> </table> <h4 id="example-sharing-a-single-episode-without-a-playlist">Example: Sharing a single episode, without a playlist</h4> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span></span><span class="p"><</span><span class="nt">iframe</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://widget.spreaker.com/player?episode_id=12794242"</span> <span class="na">width</span><span class="o">=</span><span class="s">"100%"</span> <span class="na">height</span><span class="o">=</span><span class="s">"200px"</span> <span class="na">frameborder</span><span class="o">=</span><span class="s">"0"</span><span class="p">></</span><span class="nt">iframe</span><span class="p">></span></code></pre></figure> <h4 id="example-sharing-a-shows-latest-episode-without-a-playlist">Example: Sharing a show鈥檚 latest episode, without a playlist</h4> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span></span><span class="p"><</span><span class="nt">iframe</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://widget.spreaker.com/player?show_id=1433865&playlist=false"</span> <span class="na">width</span><span class="o">=</span><span class="s">"100%"</span> <span class="na">height</span><span class="o">=</span><span class="s">"200px"</span> <span class="na">frameborder</span><span class="o">=</span><span class="s">"0"</span><span class="p">></</span><span class="nt">iframe</span><span class="p">></span></code></pre></figure> <h2 id="the-embedded-player-on-wordpress">The Embedded Player on WordPress</h2> <p>Spreaker provides a <a href="https://wordpress.org/plugins/spreaker-shortcode/">WordPress plugin</a> to easily embed the Spreaker player in your WordPress blog or website.</p> <p>It basically adds the support for a shortcode in the form <code>[spreaker type=player ...]</code> to your WordPress, replacing all the shortcodes with the related player.</p> <p>The shortcode supports all the attributes supported by the <a href="#embed-via-a-tiny-js-loader">JS loader</a> without the <code>data-</code> prefix. For example, the resource is specified with the <code>resource</code> attribute (instead of <code>data-resource</code>), the background image with <code>cover</code> (instead of <code>data-cover</code>) and so on.</p> <h4 id="example-share-a-single-episode-without-playlist">Example: share a single episode, without playlist</h4> <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span></span><span class="o">[</span>spreaker <span class="nv">type</span><span class="o">=</span>player <span class="nv">resource</span><span class="o">=</span><span class="s2">"episode_id=12794242"</span> <span class="nv">width</span><span class="o">=</span><span class="s2">"100%"</span> <span class="nv">height</span><span class="o">=</span><span class="s2">"200px"</span><span class="o">]</span></code></pre></figure> <h4 id="example-share-the-latest-episode-by-show-with-playlist">Example: share the latest episode by show, with playlist</h4> <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span></span><span class="o">[</span>spreaker <span class="nv">type</span><span class="o">=</span>player <span class="nv">resource</span><span class="o">=</span><span class="s2">"show_id=1433865"</span> <span class="nv">width</span><span class="o">=</span><span class="s2">"100%"</span> <span class="nv">height</span><span class="o">=</span><span class="s2">"200px"</span><span class="o">]</span></code></pre></figure>  <script async="" src="https://widget.spreaker.com/widgets.js"></script> </div>  <nav id="page_menu" class="page_menu"> <div class="page_menu_item"> <h2><a href="/api/">API</a></h2> <h3>Complete API Reference</h3> <ul> <li> <h4><a href="/api/users/" title="Users">Users</a></h4> </li> <li> <h4><a href="/api/shows/" title="Shows">Shows</a></h4> </li> <li> <h4><a href="/api/show-rss-metadata/" title="Show RSS Metadata">Show RSS Metadata</a></h4> </li> <li> <h4><a href="/api/episodes/" title="Episodes">Episodes</a></h4> </li> <li> <h4><a href="/api/episode-messages/" title="Episode Messages">Episode Messages</a></h4> </li> <li> <h4><a href="/api/episode-chapters/" title="Episode Chapters">Episode Chapters</a></h4> </li> <li> <h4><a href="/api/episode-cuepoints/" title="Episode Cuepoints">Episode Cuepoints</a></h4> </li> <li> <h4><a href="/api/statistics/" title="Statistics">Statistics</a></h4> </li> <li> <h4><a href="/api/search/" title="Search">Search</a></h4> </li> <li> <h4><a href="/api/explore/" title="Explore">Explore</a></h4> </li> <li> <h4><a href="/api/tags/" title="Tags">Tags</a></h4> </li> <li> <h4><a href="/api/widgets/" title="Widgets">Widgets</a></h4> </li> <li> <h4><a href="/api/miscellaneous/" title="Miscellaneous">Miscellaneous</a></h4> </li> </ul> </div> <div class="page_menu_item"> <h2><a href="/guides/">GUIDES</a></h2> <h3>Getting Started Guides</h3> <ul> <li> <h4><a href="/guides/overview/" title="Overview">Overview</a></h4> </li> <li> <h4><a href="/guides/authentication/" title="Authentication">Authentication</a></h4> </li> <li> <h4><a href="/guides/upload-an-episode/" title="Upload an episode">Upload an episode</a></h4> </li> <li> <h4><a href="/guides/manage-your-shows/" title="Manage your Shows">Manage your Shows</a></h4> </li> <li> <h4><a href="/guides/manage-your-episodes/" title="Manage Your Episodes">Manage Your Episodes</a></h4> </li> <li> <h4><a href="/guides/working-with-draft-episodes/" title="Working with Draft Episodes">Working with Draft Episodes</a></h4> </li> <li> <h4><a href="/guides/displaying-the-episode-s-waveform/" title="Displaying the Episode's Waveform">Displaying the Episode's Waveform</a></h4> </li> <li> <h4><a href="/guides/embedding-the-player/" title="Embedding the Player">Embedding the Player</a></h4> <ul class="section-nav"> <li class="toc-entry toc-h2"><a href="#whats-an-embedded-player">What鈥檚 an Embedded Player?</a></li> <li class="toc-entry toc-h2"><a href="#two-ways-to-embed-a-player">Two Ways to Embed a Player</a></li> <li class="toc-entry toc-h2"><a href="#embedding-via-a-tiny-js-loader">Embedding Via a Tiny JS Loader</a></li> <li class="toc-entry toc-h4"><a href="#example-sharing-a-single-episode-with-no-playlist">Example: Sharing a single episode, with no playlist</a></li> <li class="toc-entry toc-h4"><a href="#example-sharing-a-shows-latest-episode-with-a-playlist">Example: Sharing a show鈥檚 latest episode, with a playlist</a></li> <li class="toc-entry toc-h4"><a href="#example-sharing-a-specific-episode-with-a-playlist-displaying-all-the-episodes-of-a-show">Example: Sharing a specific episode, with a playlist displaying all the episodes of a show</a></li> <li class="toc-entry toc-h2"><a href="#directly-embedding-an-iframe">Directly Embedding an iFrame</a></li> <li class="toc-entry toc-h4"><a href="#example-sharing-a-single-episode-without-a-playlist">Example: Sharing a single episode, without a playlist</a></li> <li class="toc-entry toc-h4"><a href="#example-sharing-a-shows-latest-episode-without-a-playlist">Example: Sharing a show鈥檚 latest episode, without a playlist</a></li> <li class="toc-entry toc-h2"><a href="#the-embedded-player-on-wordpress">The Embedded Player on WordPress</a></li> <li class="toc-entry toc-h4"><a href="#example-share-a-single-episode-without-playlist">Example: share a single episode, without playlist</a></li> <li class="toc-entry toc-h4"><a href="#example-share-the-latest-episode-by-show-with-playlist">Example: share the latest episode by show, with playlist</a></li> </ul> </li> <li> <h4><a href="/guides/user-agent-format/" title="User Agent format">User Agent format</a></h4> </li> <li> <h4><a href="/guides/terminology/" title="Terminology">Terminology</a></h4> </li> </ul> </div> </nav> </div> </main>  <footer> <ul class="ft_links"> <li><a href="https://www.spreaker.com">Spreaker</a></li> <li><a href="https://www.spreaker.com/terms">Terms</a></li> <li><a href="https://www.spreaker.com/privacy">Privacy</a></li> <li><a href="https://help.spreaker.com">Support</a></li> <li><a href="https://status.spreaker.com">Status</a></li> </ul> <small class="ft_copyright">Copyright 2024 - Spreaker Inc. - New York, NY</small> </footer> </body> </html>

CINXE.COM

Embedding the Player | Spreaker Developer Guides