Ad player controls overlapping

Question

Ad player controls overlapping

Closed this issue 3 years ago · 4 comments

I have tried the plugin and it works fine but the UI of ad player is distorted as can be seen in below image

Player controls like volume etc. are overlapping on playbar and resulting in bad experience. Below is the link to the video, any help is appreciated

https://api.vadoo.tv/landing_page?vid=WK1aotg5SFG0qJRUCwysEa01jdFOh0SI

Answer 1 · 2021-10-03T05:02:51.000Z

@Kiro705 Any help is appreciated as this is causing a poor user experience

Answer 2 · 2021-10-04T15:19:20.000Z

Hello @Anil-matcha ,

Sorry for the delay in my response.

I was able to see the mis-styled ad controls on your test page. However, the styling looks correct in the plugin's sample page. The sample uses this stylesheet. I would recommend comparing your player with this example to see what style might be missing or being overwritten.

Thank you,
Jackson
IMA SDK team

Answer 3 · 2021-10-04T16:30:05.000Z

Hi @Kiro705, I have imported the same scripts from the sample page but the styling is broken. The videojs skin I am using for the player is a custom made skin but it shouldn't impact the ad player as ad player is overlay on videojs player if I am not wrong.

Is there any custom css for ad player which can be controlled to prevent this issue ?

Answer 4 · 2021-10-14T14:12:04.000Z

Hello @Anil-matcha ,

Instead of incorporating the plugin's css with this code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs-ima@1.11.0/dist/videojs.ima.css">

I would recommend adding these styles manually to your own stylesheet, then using that to debugging from there to determine where the issue is happening.