Intégrer avec du CSS personnalisé

Episode only

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

Podcast avec tous les épisodes

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.

Comment faire

Utilisez JavaScript pour écraser le style du lecteur intégré. Copiez le script ci-dessous, modifiez-le si vous le souhaitez, puis collez-le dans (le bas de) votre site 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>