Integreren met aangepaste CSS

Enkel aflevering

Sluit een aflevering in door op het pictogram "Delen" in Podverse te drukken, de code "Insluiten" te kopiëren en in je webpagina te plakken.

Podcast met alle afleveringen

Neem een afleveringenlijst op met de ingesloten speler door op het pictogram "Delen" in Podverse te drukken, de code "Insluiten" te kopiëren en in je webpagina te plakken.

Hoe?

Gebruik JavaScript om de stijl van de ingesloten speler aan te passen. Kopieer het onderstaande script, verander het als je wilt en plak het dan in (de onderkant van) je 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>