This is a custom code placeholder.
Switch to Preview or publish the page
to see how your code works. Double-click to edit

<style> #podcasts-player-container .wpb_raw_html { max-height: 145px; /* This is a fix for iPhone/Safari gap */ } #podcasts-player-container .wpb_wrapper { line-height: 0; } #podcasts-player-container { zoom: 0.69; /* Fix for mobiles */ } .styles__episodeFeed___3mOKz { position: relative; overflow-y: auto; background-color: #54595E; max-height: 417px; padding: 11px; margin-bottom: 70px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; display: none; color: #fff; } .styles__episodeFeedItem___1U6E2 { min-height: 106px; color: #292f36; background: #fff; border-radius: 4px; padding: 14px 12px; overflow: hidden; position: relative; } .styles__episodeFeedItem___1U6E2 a { color: inherit; text-decoration: none; text-align: left; } .styles__episodeFeedItem___1U6E2 .styles__episodeImage___tMifW { display: flex; align-items: center; justify-content: center; border-radius: 4px; overflow: hidden; float: left; margin: 0 6px 10px 0; position: relative; width: 47px; height: 47px; } .styles__circle___1g-9u { border: none; padding: 0; display: flex; justify-content: center; align-items: center; } .styles__white___372tQ { background: #fff; } .styles__episodeFeedItem___1U6E2 .styles__episodeImage___tMifW img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 4px; vertical-align: middle; } .styles__playButton___1Ivi4 { cursor: pointer; text-align: center; padding: 0; } .styles__playButton___1uaGA { z-index: 0; } .styles__playButton___1Ivi4 svg { overflow: visible; } .styles__episodeFeedItem___1U6E2 a { color: inherit; text-decoration: none; } .styles__episodeFeedItem___1U6E2 .styles__episodeHeading___29q7v { font-weight: 700; font-size: 15px; color: #292f36; } .styles__episodeFeedItem___1U6E2 .styles__episodeDescription___C3oZg, .styles__episodeFeedItem___1U6E2 p { color: rgba(41,47,54,.7); font-size: 13px; line-height: 14px; } .styles__episodeFeedItem___1U6E2 .styles__episodeDescription___C3oZg { clear: left; padding-right: 2px; text-align: left; } .styles__episodeFeedItem___1U6E2 .styles__episodeDescription___C3oZg, .styles__episodeFeedItem___1U6E2 p { color: rgba(41,47,54,.7); font-size: 13px; line-height: 14px; } .styles__episodeFeedItem___1U6E2 .styles__episodeCreated___1zP5p, .styles__episodeFeedItem___1U6E2 .styles__episodeDuration___2I0Qb { margin-top: 8px; font-size: 11px; line-height: 13px; color: #c9cbcd; } .styles__episodeFeedItem___1U6E2 .styles__episodeDuration___2I0Qb { float: right; } .styles__episodeFeedItem___1U6E2 .styles__episodeCreated___1zP5p, .styles__episodeFeedItem___1U6E2 .styles__episodeDuration___2I0Qb { margin-top: 8px; font-size: 11px; line-height: 13px; color: #c9cbcd; } .styles__episodeFeedItem___1U6E2 .styles__episodeCreated___1zP5p { float: left; } .styles__episodeFeed___3mOKz { margin-bottom: 73px; } .styles__episodeFeed___3mOKz { display: block; } @media (max-width: 768px) { .styles__episodeFeedItem___1U6E2 { margin-bottom: 10px; } } @media (min-width: 769px) { .styles__episodeFeed___3mOKz { padding: 35px; } .styles__episodeFeedItem___1U6E2 { padding: 25px 22px; } .styles__episodeFeed___3mOKz>div { margin-bottom: 23px; } .styles__episodeFeedItem___1U6E2 .styles__episodeImage___tMifW { width: 56px; height: 56px; margin-right: 22px; margin-bottom: 0; } .styles__episodeFeedItem___1U6E2 .styles__episodeHeading___29q7v { font-weight: 700; font-size: 18px; color: #292f36; margin-bottom: 4px; width: 365px; } .styles__episodeFeedItem___1U6E2 .styles__episodeDescription___C3oZg, .styles__episodeFeedItem___1U6E2 p { font-size: 16px; line-height: 18px; color: #7f8287; } .styles__episodeFeedItem___1U6E2 .styles__episodeDescription___C3oZg { clear: none; width: 465px; margin-left: 78px; } .styles__episodeFeedItem___1U6E2 .styles__episodeDescription___C3oZg, .styles__episodeFeedItem___1U6E2 p { font-size: 16px; line-height: 18px; color: #7f8287; } .styles__episodeFeedItem___1U6E2 .styles__episodeCreated___1zP5p, .styles__episodeFeedItem___1U6E2 .styles__episodeDuration___2I0Qb { margin: 0; float: none; position: absolute; font-size: 13px; line-height: 15px; } .styles__episodeFeedItem___1U6E2 .styles__episodeDuration___2I0Qb { bottom: 12px; right: 22px; } .styles__episodeFeedItem___1U6E2 .styles__episodeCreated___1zP5p { top: 25px; right: 22px; } .styles__episodeFeedItem___1U6E2 .styles__episodeCreated___1zP5p, .styles__episodeFeedItem___1U6E2 .styles__episodeDuration___2I0Qb { margin: 0; float: none; position: absolute; font-size: 13px; line-height: 15px; } } </style> <div id="podcasts-player-container"> <iframe id="anchor-podcast-iframe" src="https://anchor.fm/marc-elmer/episodes/Digital-Dirty-Talk-Episode-2-eosalv/embed" style="width: 100%;" frameborder="0" scrolling="no" name="iframe"></iframe> <script src="https://static.sekandocdn.net/static/feednami/feednami-client-v1.1.js"></script> </div> <script> // Your site url (must include https://anchor.fm/) const siteUrl = 'https://anchor.fm/marc-elmer/episodes/Digital-Dirty-Talk-Episode-2-eosalv'; // Get position to split url for modification seen below const urlModPosition = siteUrl.length; // RSS feed URL (site key is found in RSS feed URL) const rssUrl = 'https://anchor.fm/s/41ee6650/podcast/rss'; // Container which holds the iframe - so that we can append the podcast list just below it const iframeContainer = document.getElementById('podcasts-player-container'); // Use feednami to parse the RSS in to JSON and give us a JSON object feednami.load(rssUrl) .then(feed => { // Add the container for the list before the loop iframeContainer.innerHTML += `<div id="podcast-list-container" class="styles__episodeFeed___3mOKz"></div>`; const podcastListContainer = document.getElementById('podcast-list-container'); // Loop through the JSON to produce the list for(let entry of feed.entries){ // add '/embed' to URL so that it works in an iframe const originalURL = entry.link; console.log(originalURL); const pathToAdd = '/embed'; const revisedUrl = [originalURL.slice(0, urlModPosition), pathToAdd, originalURL.slice(urlModPosition)].join(''); // create an excerpt out of the title const c = entry.title; const clength = 31; const titleExcerpt = c.substring(0, clength) + '...'; // create an excerpt out of the description let d = entry.description; let dlength = 114; let descriptionExcerpt = d.substring(0, dlength) + '...'; // get minutes and seconds from seconds formatted data let time = entry['itunes:duration']['#']; const minutes = Math.floor(time / 60); const seconds = time - minutes * 60; const hours = Math.floor(time / 3600); time = time - hours * 3600; function str_pad_left(string,pad,length) { return (new Array(length+1).join(pad)+string).slice(-length); } const finalTime = str_pad_left(minutes,'0',2)+':'+str_pad_left(seconds,'0',2); // convert JSON ISO 8601 formatted date in to a readable date const date = new Date(entry.date); const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; const month = monthNames[date.getMonth()]; const day = date.getDate(); const year = date.getFullYear(); // Output the episode on the page with the data we have prepared podcastListContainer.innerHTML += ` <div class="styles__episodeFeedItem___1U6E2"> <a class="podcast-list-link styles__episodeImage___tMifW" href="${revisedUrl}" target="iframe"> <img src="${entry.image.url}"> <button class="styles__circle___1g-9u styles__white___372tQ styles__playButton___1Ivi4 styles__playButton___1uaGA" aria-label="" style="height: 31px; min-height: 31px; width: 31px; min-width: 31px; border-radius: 16px;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 0 11 12" width="13" height="13"><rect width="12" height="12" fill="none"></rect><path d="M1 .81v10.38a.76.76 0 0 0 .75.75.67.67 0 0 0 .39-.12l8.42-5.18a.75.75 0 0 0 0-1.28L2.14.18a.75.75 0 0 0-1 .24.79.79 0 0 0-.14.39z" fill="#282F36"></path></svg> </button> </a> <a class="podcast-list-link" href="${revisedUrl}" target="iframe"> <div class="styles__episodeHeading___29q7v" style="overflow: hidden;"> <div> <div> ${titleExcerpt} </div> </div> </div> </a> <div class="styles__episodeDescription___C3oZg "> <div class="styles__expander___1NNVb styles__expander--dark___3Qxhe" style="overflow: hidden;"> <div> <div> ${descriptionExcerpt} </div> </div> </div> </div> <div class="styles__episodeDuration___2I0Qb"> ${finalTime} </div> <div class="styles__episodeCreated___1zP5p"> ${month} ${day}, ${year} </div> </div> `; } }); </script>