Incrustar con CSS personalizado

Solo un episodio

Inserta un solo episodio pulsando el icono "Compartir" en Podverse, copia el código "Embed" y pegarlo en tu página web.

Podcast con todos los episodios

Incluye un listado de episodios pulsando el icono "Compartir" en Podverse, copia el código "Embed" y pegarlo en tu página web.

Cómo

Utilice JavaScript para reemplazar el estilo del reproductor incrustable. Copie el siguiente script, cámbielo si lo desea y péguelo en (la parte inferior de) su sitio web.


<script>
  function pvHandleCSSOverrides(e) {
    const key = e.message ? "message" : "data"
    const data = e[key]

    if (data == 'pv-embed-has-loaded') {
      const pvFrameNode = document.querySelector('#pv-embed-player')      

      if (pvFrameNode) {
        const messageBody = {
          eventName: 'pv-embed-load-custom-css',
          styleRules: {
            '--pv-embed-max-width': 'auto',
            '--pv-embed-list-max-height': '100vh',
            '--pv-embed-background-color': '#ffffff',
            '--pv-embed-border-color': 'rgba(0, 0, 0, 0.1)',
            '--pv-embed-divider-color': 'rgba(255, 255, 255, 0.2)',
            '--pv-embed-font-family': 'Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
            '--pv-embed-font-size-xxxl': '33px',
            '--pv-embed-font-size-xxl': '27px',
            '--pv-embed-font-size-xl': '21px',
            '--pv-embed-font-size-lg': '19px',
            '--pv-embed-font-size-md': '16px',
            '--pv-embed-font-size-sm': '14px',
            '--pv-embed-font-size-tiny': '12px',
            '--pv-embed-font-size-tiniest': '9px',
            '--pv-embed-text-color-primary': '#2d2d2d',
            '--pv-embed-text-color-secondary': '#333333',
            '--pv-embed-text-color-tertiary': '#868686',
            '--pv-embed-text-color-quaternary': '#e90000',
            '--pv-embed-icon-color': '#676767',
            '--pv-embed-play-button-background-color': '#f7f7f799',
            '--pv-embed-play-button-border-color': '#676767',
            '--pv-embed-play-button-icon-color': '#676767',
            '--pv-embed-slider-background-color': 'rgba(221,221,221,.5)',
            '--pv-embed-slider-fill-color': '#aaaaaa',
            '--pv-embed-slider-marker-color': '#e90000',
            '--pv-embed-slider-highlight-color': 'rgba(233, 0, 0, 0.5)',
            '--pv-embed-live-badge-background-color': 'rgba(196, 55, 69, 0.16)',
            '--pv-embed-live-badge-border-color': '#aa1e2b',
            '--pv-embed-live-badge-text-color': '#2d2d2d',
            '--pv-embed-close-button-background-color': '#cccccc',
            '--pv-embed-close-button-icon-color': '#333333',
            '--pv-embed-full-screen-background-color': 'rgba(255, 255, 255, 0.2)'
          }
        }

        pvFrameNode.contentWindow.postMessage(messageBody, 'https://podverse.fm')
      }            
    }
  }

  window.addEventListener('message', pvHandleCSSOverrides)
</script>