Embed with Custom CSS

Episode only

Embed a single episode by pressing the "Share" icon in Podverse, copy the "Embed" code, and paste it into your webpage.

Podcast with all episodes

Include an episode list with the embeddedable player by pressing the "Share" icon in Podverse, copying the "Embed" code, and pasting it into your webpage.

Hur man

Use JavaScript to override the style of the embeddable player. Copy the script below, change it if you want, then paste it into (the bottom of) your website.


<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>