title: How do I create a Player for a Podcast using RSS Feed?
body: <p>I am building a website using html, css and bootstrap for my podcast, my problem is that I want to put a player of the podcast in the hero image part of the website so people can come and listen to my podcast at the moment of entering into the website. I want the player to use the RSS Feed of my podcast to always update the player with the latest episode, I hace been trying to look for a solution for that but I have found anything. I made an account here on stack overflow to reach some expert on this field to help me with this problem. I will attach some pictures of the design to illustrate my problem much better: <a href="https://i.stack.imgur.com/YnOR1.png" rel="nofollow noreferrer">So this is how I want it to look like</a> I just need it to play the podcast and get updated every time I upload a new episode.</p>
  <p>I put my code of what I have until now to see if is of help to resolve this. Thanks you all!
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8";
  /* CSS Document */
  .wrapper {
    background: transparent linear-gradient(180deg, #07050B 0%, #18191F 48%, #2A2E34 100%) 0% 0% no-repeat padding-box;
      margin-top: -60px;
      padding-top: 40px;
  }
  .navbar {
    margin: 62px auto auto 141px;
  }
  .navbar-brand img {
    max-width: 60%;
  }
  .nav ul {
    margin: -45px auto auto;
    padding-left: 700px;
    list-style: none;
    display: table;
    width: 38px;
    text-align: left;
  }
  .nav li {
    display: table-cell;
    position: relative;
    padding-right: 10px;
  }
  .nav a {
    color: #fff;
    text-decoration: none;
    display: flex;
    position: relative;
    font-size: 14px;
  }
  .nav a:after {
    bottom: 0;
    content: "";
    display: block;
    height: 4px;
    left: 10%;
    position: absolute;
    background: #FFE064;
    transition: 0.1s ease 0s, center 0.3s ease 0s;
    width: 0;
  }
  .nav a:hover:after {
    width: 100%;
    left: 1px;
  }
  .nav a:hover {
    font-weight: bold;
  }
  #Component_6_1 {
       scroll-behavior: smooth;
      display: flex;
      margin-bottom: 30px;    
  }
  #heroImage {
      padding-top: 140px;
      padding-bottom: 160px;
  }
  #Calltoaction{
      font-size: 45px;
      font-weight: 900;
      letter-spacing: 4px;
  }
  .platfomrs {
      margin-right: 80px;
  }
  .platfomrs a {
      padding-left: 21px;
  }
  #calltoaction {
      background-color: #FFE064;
  }
  .titulo {
      font-size: 45px;
      font-weight: 900;
      letter-spacing: 4px;
      margin-top: 75px;
  }
  #blog {
      display: flex;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="es"&gt;
  &lt;head&gt;
  &lt;!-- Required meta tags --&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  &lt;meta name="author" content="Sealights Designs"&gt;
  &lt;meta name="description" content="El Podcast Libertario es el lugar donde aprendes a recuperar tu libertad de pensamiento, donde hablamos temas desde filosofia hasta economia y como tu, el individuo, puedes ser mas feliz con mas libertad"&gt;
  &lt;meta name="keywords" content="HTML, CSS, JavaScript"&gt;
  
  &lt;!-- Title --&gt;
  &lt;title&gt;Podcast Libertario - Inicio&lt;/title&gt;
  
  &lt;!-- Links --&gt;
  &lt;link rel="shortcut icon" type="image/png" href="favicon.ico/favicon-16x16.png"/&gt;
  &lt;link rel="stylesheet" href="css/inicio.css"/&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  &lt;link
    rel="stylesheet"
    href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
  /&gt;
  &lt;!-- Scripst --&gt; 
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt; 
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt; 
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wrapper"&gt;
    &lt;header class="container-fluid"&gt;
      &lt;nav class="navbar navbar-transparent "&gt; &lt;a class="navbar-brand" href="#"&gt; &lt;img src="images/Podcast Libertario Logo.svg" alt="logo"/&gt; &lt;/a&gt; &lt;/nav&gt;
      &lt;div class="nav"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a class="nav-item nav-link text-white" href="#"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="nav-item nav-link text-white" href="#"&gt;Episodios&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="nav-item nav-link text-white" href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="nav-item nav-link text-white" href="#"&gt;Descargas&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="nav-item nav-link text-white text-nowrap" href="#"&gt;Sobre Nosotros&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="nav-item nav-link text-white" href="#"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;article class="conteiner-fluid"&gt;
      &lt;div id="heroImage" class="d-flex justify-content-center"&gt;
        &lt;aside&gt; &lt;img src="images/Copia de logolittle.jpg" width="400" height="400" alt="Cover"/&gt;
          &lt;audio controls&gt;
            &lt;source src="http://cast.rocks/hosting/24334/85-Himno-destazandolibros.mp3" type="audio/mpeg"&gt;
          &lt;/audio&gt;
        &lt;/aside&gt;
      &lt;/div&gt;
      &lt;section class="d-flex justify-content-center"&gt; &lt;a href="#anfitriones container-fluid"&gt;
        &lt;svg id="Component_6_1" data-name="Component 6 – 1" xmlns="http://www.w3.org/2000/svg" width="36" height="19" viewBox="0 0 35.604 18.918"&gt;
          &lt;path id="Path_2055" data-name="Path 2055" d="M36.732,13.515,39.853,10H4.249L7.2,13.515l14.759,15.4Z" transform="translate(-4.249 -10)" fill="#ffe064"/&gt;
        &lt;/svg&gt;
        &lt;/a&gt; &lt;/section&gt;
    &lt;/article&gt;
  &lt;/div&gt;
  &lt;section id="calltoaction" class="container-fluid"&gt;
    &lt;p id="Calltoaction" class="d-flex justify-content-center"&gt;¡ESCUCHANOS EN TODAS LAS PLATAFORMAS!&lt;/p&gt;
    &lt;div class="platfomrs d-flex justify-content-center"&gt;
      &lt;ul&gt;
        &lt;a class="d-inline-flex" href="#"&gt;&lt;img src="images/icons8-spotify@2x.png" width="63" height="63" alt="Spotify"/&gt;&lt;/a&gt;
        &lt;a class="d-inline-flex" href="#"&gt;&lt;img src="images/icons8-browse-podcasts-96@2x.png" width="63" height="63" alt="Apple Podcast"/&gt;&lt;/a&gt;
        &lt;a class="d-inline-flex" href="#"&gt;&lt;img src="images/google_podcast_icon_135536@2x.png" width="63" height="63" alt="Google Podcast"/&gt;&lt;/a&gt;
        &lt;a class="d-inline-flex" href="#"&gt;&lt;img src="images/ivoox@2x.png" width="63" height="63" alt="iVoox"/&gt;&lt;/a&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/section&gt;
      &lt;blog&gt;
        &lt;p class="titulo d-flex justify-content-center"&gt;BLOG LIBERTARIO&lt;/p&gt;
          &lt;div id="blog"&gt;
              &lt;a&gt;&lt;img src="images/Prometheus Justin Kendall's Prometheus -1.png" width="678" height="637" alt=""/&gt;&lt;/a&gt;
              &lt;a&gt;&lt;img src="images/superficialidad iceberg.png" width="687" height="319" alt=""/&gt;&lt;/a&gt;
              &lt;a&gt;&lt;img src="images/observacion de la realidad binoculars@2x.png" width="343.5" height="300" alt=""/&gt;&lt;/a&gt;
              &lt;a&gt;&lt;img src="images/Lo que una amiga...L-1.png" width="343.5" height="300" alt=""/&gt;&lt;/a&gt;
          &lt;/div&gt;
      
      &lt;/blog&gt;
  &lt;/body&gt;
  &lt;footer&gt;&lt;/footer&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>