Podlove Player Layout Shift

Hey,

I have an issue regarding the integration of the podlove player.

The player loads in an iframe and expands the wrapping div - is this correct?

This leads on a website to a “layout shift”, because the player loads after the rest of the site and pushes down all following elements.

This is very annoying, especially for mobile user.

Google is dealing with those shifts for a while as part of their “core web vitals”:

https://support.google.com/webmasters/answer/9205520?hl=de

I don’t panic about what google says, but I think they are right in this case because it’s bad for the user.

I solved this problem for me by adding manually a fixed hight by css that extends the area/div while the website is rendered and before the player loads. This is fine for me because we have no chapters in our episodes, which will make the height of the player dynamic.

Perhaps it can be calculated by js to pre-extend the area of the player to a correct height and prevent layout shifting?

Looking forward for your ideas and feedback!

Best, Fabian

Hey,

the player height depends on the provided template. Since this is fully user defined I simply can’t determine the final height before rendering. A custom loader/adaption in the theme is required.