search

googleads / videojs-ima

IMA SDK Plugin for Video.js
Apache License 2.0
450 stars 284 forks source link

Ad player controls overlapping #1014

Closed Anil-matcha closed 2 years ago

Anil-matcha commented 3 years ago

Hi @Kiro705

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

adplayer

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

Anil-matcha commented 3 years ago

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

Kiro705 commented 3 years ago

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

Anil-matcha commented 3 years ago

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 ?

Kiro705 commented 3 years ago

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.