Embedded v5 player does not contain all elements

Podlove Web Player
1

Hi all,

we run a website that is based on various systems, including WordPress. We use Podlove to display Podcast episodes. Outside of WordPress, we embed the episodes as IFrames.

We would like to display the Podlove players in the same way across all systems. We use Podlove Web Player v5, which (in WordPress) displays chapter lists, transcripts, downloads etc. below the actual player. As far as I know, this is not easy to implement when embedding as an IFrame, because the size of the IFrame would have to be adjusted.

With Podlove Web Player v4, it is possible to display the above-mentioned elements without changing the size of the IFrame (see example).

I have two questions:

  • We cannot configure the Web Player v5 by modifying the embed code so that chapter lists are displayed below the player. Is that correct?
  • Is there a way to display such elements (as with Web Player v4) without changing the size of the IFrame?

Thanks
Oliver

2

Hi Oliver,
did you find a solution for that? We would love to integrate our podcast with transcripts and everything into our Pressbooks system.
Best wishes
Frank J.

3

Hi Frank,

I’m afraid not. We went back to v4 because the ability to embed a full player is rather important to us.

Best
Oliver

4

Hi Oliver,
Hmmm. Thank you!
For some reason, the transcript does not show up in the embedded version of v4 as well. It does in the original post, but when I embedded it (768*290) it is missing. Do you have an idea?
Best
Frank J.

5

Hi Frank,

I wasn’t aware of this before, but it’s the same for me: Embedded v4 players display more than v5 players do, but no transcripts.

Best
Oliver

6

Hey everyone,

after having this problem for years now I finally found a solution. It’s quite simple.

Go to your Wordpress backend and to the template editor of the webplayer. Configure your favorite template. Now just copy this code.

Go to the path of your share.html (/wp-content/plugins/podlove-web-player/web-player/) and make a copy of that file. Then edit it.

In this file looks like this:

<!doctype html><html lang="en"><head><meta name="viewport" content="width=device-width,initial-scale=1"><meta charset="utf-8"/><style>html,
    body {
      height: 100%;
      overflow: hidden;
    }</style><script>window.resourceBaseUrl = '5.12.0/player/';</script><script defer="defer" src="share.js"></script></head>
<body>

<div id="app">
  <root data-test="player--share"><div class="p-4 flex flex-col"><div class="flex flex-grow"><div class="w-20 mr-4"><poster class="rounded-sm shadow overflow-hidden"></poster></div><div class="w-full my-2"><show-title class="text-sm"></show-title><episode-title class="text-base"></episode-title></div></div><divider class="w-full my-4"></divider><div class="flex w-full items-center justify-center"><play-button class="block mr-5" variant="simple"></play-button><timer-current class="text-sm mr-5"></timer-current><progress-bar class="mr-5"></progress-bar><timer-duration class="text-sm"></timer-duration></div></div><error></error></root>
</div>

<link rel="stylesheet" href="5.12.0/player/styles.css"><script src="5.12.0/player/vendor.js"></script><script src="5.12.0/player/styles.js"></script><script src="5.12.0/player/bootstrap.js"></script></body></html>

You see that everything between <root> and </root> is actually a template for the embed code. Replace this by your favorite template.

Now you may use this share.html (and parameters for your episode) as iframes includes.

Renaming the file might be necessary since share.html might be overwritten with the next plugin upgrade.