Streaming live at 10am (PST)

Trouble with embedded player's sizes on mobile

hey guys,

trying to get those embedded players displaying correctly on mobile, but it doesn’t seem to work. It works just fine on desktop though.

scripts:

<script src='https://play.pod.co/bolesne-poranki-w-newonce-radio-1.js'></script>

or

<div class="podcastdotco-wrapper"><iframe data-target="bolesne-poranki-w-newonce-radio-1" src="https://play.pod.co/bolesne-poranki-w-newonce-radio-1" frameborder="0" width="100%" scrolling="no" style="overflow:hidden;max-width:750px;height:500px;" class="podcastdotco-player podcastdotco-player--podcast"></iframe><script src="https://play.pod.co/embed/frame-v1.js"></script></div>

I also tried to follow advice from this thread , but haven’t managed to deal with it on my end.


Here is my site Read-Only: LINK

Would you mind providing your share link here?

You embed code uses podcastdotco-wrapper class. YOu can custom style it in a seperate div block.

Delete the following from embed code:
width="100%"
max-width:750px;height:500px

Apply the following settings on your STYLE Guide page and save. (click to see full image)

thanks for the reply. It still doesn’t seem to be working on mobile - it’s too wide I reckon.

![PNG|281x500]

sure!

https://preview.webflow.com/preview/newonce-radio?utm_medium=preview_link&utm_source=designer&utm_content=newonce-radio&preview=cca01f3306e8245c0c2147d2695fecb7&pageId=5d1df93384ad822795eb8dfd&mode=preview

I applied those style setting both on desktop and mobile - desktop seems to be working just fine, but I cannot get it right on mobile :frowning:

Hi, @Maciej_Orlowski!!

Ben here with the Webflow Customer Support Team!

Thanks so much for posting this. I did some investigating and I was able to get this to work in a blank project. I used different code than what you have in your project You can see the preview link here:

https://preview.webflow.com/preview/webflow-podcasty?utm_medium=preview_link&utm_source=designer&utm_content=webflow-podcasty&preview=f227a35bc2005310a6bf4a3b580a7f73&mode=preview

And here’s the code I used in the embed:

<iframe data-target="bolesne-poranki-w-newonce-radio-1" src="https://play.pod.co/bolesne-poranki-w-newonce-radio-1" frameborder="0" width="100%" scrolling="no" style="overflow:hidden;max-width:750px;height:500px;" class="podcastdotco-player podcastdotco-player--podcast"></iframe>

Let me know if you have any other questions and I’ll be happy to assist you further!

hi!

thanks for trying to help out. I’ve tried your code on a new page, but still couldn’t get it to work on mobile (screen). On preview it works just like yours, but ‘live’ it just doesn’t :frowning: Below I provide both preview share link and live one, where you can see that it’s bugged on mobile.PNG

preview link: https://preview.webflow.com/preview/newonce-radio?utm_medium=preview_link&utm_source=designer&utm_content=newonce-radio&preview=cca01f3306e8245c0c2147d2695fecb7&pageId=5d42cce15e4c2e0cdffec1ae&mode=preview

live link: https://www.newonce.radio/test-podcast-playera

@rileyrichter any ideas?

Hi, @Maciej_Orlowski!

I took a look at your live site and it’s working great for me here:

https://newonce-radio.webflow.io/test-podcast-playera

Would you be able to use a tool like Cloud App to provide me with a short video about what you’re seeing?

desktop works just fine, it’s mobile I have a problem with, here you have a video of my mobile screen: https://we.tl/t-d6zBDI9oO9

I also investigated this a little bit and I see that the problem appears when episodes have super long titles - is that possbile? I attach 2 examplesPNG PNG