Container showing overlay z-index 1111

[jakubfrydrych]

Hi, I would like to ask if some parameter in plugin configuration can set another value for z-index of element displaying nonlinear ads.

Or whether it could be somehow set that after the overlay time expires, the element hides and does not remain visible through the player?

The problem arises because the container with the .ima-ad-container.bumpable-ima-ad-container css class has a z-index value of 1111, so all surrounding elements need to be re-styled to have a higher value. For example, for the correct function of the big play button. Probably a similar problem was solved in issue # 403, but the discussion did not continue.

Thank you in advance for your reply

[Kiro705]

Hi @jakubfrydrych ,

Thanks for pointing this out.

A work-around I found was to add this css.

.ima-ad-container {
    display: none;
}

Let me know if that works for you.

I would say expect a fix for this in the next videojs-ima plugin release.

[jakubfrydrych]

Hi, thank you very much for your reply.

I think this workaround will not work, because the advertising container for some reason has an inline style entry that will probably have the highest specificity of css rules. So you would need to change the style attribute directly on the container programmatically.

So far I have not found out why the container has this value of z-index: 1111.

A little more complicated workaround seems to me to use a timeout with the minSuggestedDuration value for overlay and then hide the ad-container and display the non-linear ads again. The problem will probably distinguish companion from overlay.

Issue # 849 also applies to this topic.

[Kiro705]

Hi @jakubfrydrych ,

Would you include steps to reproduce or a sample app of the bug?

display: block is being added on ad start, but should be being changed to display: none when the ad ends.

My fix was for if the container is blocking an overlaying button before the start of a video.

[Kiro705]

Hi @jakubfrydrych ,

It is my understanding that the ima-ad-container is hidden or shown depending on if ads are play or not. You may have found an issue with your player not hiding the container following an ad break.

If you are still experiencing this issue, could you include steps to reproduce and I can take a look at solving the issue?

[ckybonist]

Hi @Kiro705 , your workaround solves my problem : )

I've found that, If the ad not fill in, thendisplay: none won't added to ad container.

Furthermore, entering fullscreen mode will cause the videojs-ima add an inline style of width and height matches video container. Due to ad container has high z-index and no display: none, my video control bar is unclickable.

Here's my log:

VIDEOJS: ADS: Received nopreroll event
VIDEOJS: ADS: Skipping prerolls due to nopreroll event (BeforePreroll)
VIDEOJS: ADS: Playback was canceled by cancelContentPlay
VIDEOJS: ADS: Received play event (BeforePreroll)
VIDEOJS: ADS: BeforePreroll -> Preroll
VIDEOJS: ADS: Preroll -> ContentPlayback
ADS: Received adsready event (ContentPlayback)

My concern is that using the workaround like above or directly change the ad-container's style will break the AD's presence.

[Kiro705]

Hi @ckybonist ,

Could you please let me know the steps to reproduce the unclickable control bar bug?

Right now I have tested or simple sample app and was not able to reproduce the issue.

[ckybonist]

Sure, I would find time using sample codepen to reproduce this bug.

Right now, my observation is:

1. VMAP response is success: so videojs-ima thinks AD will fill into my video player
2. But the VAST requests didn't get sent (due to unknown reasons)
3. Changing the width/height of player cause videojs-ima add a style to expand AD container to fit player container.

My guess is: on step (3), videojs-ima thinks it should render an AD, however, AD assets doesn't exist (2), so the blank div just overlap (higher z-index) my video.

@Kiro705

[ckybonist]

@Kiro705

Right now I couldn't reproduce the bug by sample codepen, so I just provide some info first:

After enter fullscreen, the ad container's HTML became:

<div id="my-video-id_ima-ad-container" class="ad-container" style="position: absolute; z-index: 1111;">
    <div style="position: absolute; width: 678px; height: 381.375px;">
        ...
    </div>
    <div id="polydice-video_ima-controls-div" class="polydice-video_ima-controls-div ima-controls- 
         div" style="width: 100%;">
        ...
    </div>
</div>

Why ad-container overlaps my video:

1. Outermost <div /> has z-index: 1111
2. First child <div /> has width: 678px; height: 381.375px which is exactly the video's width and height.

videojs options

• fluid: true,
• controls: true,
• autoplay: true,
• muted: true,
• loop: true,
• preload: 'metadata',
• aspectRatio: '16:9',
• docking: true,
• playsinline: true

videojs-ima options

• adTagUrl
• disableCustomPlaybackForIOS10Plus: true
• adsRenderingSettings: { enablePreloading: true }
• contribAdsSettings: { debug: true }
• debug: true

I've registered an click/touched event on video player to support autoplay

  let startEvent = 'click';
  if (isMobile()) {
    startEvent = 'touchend';
  }

  videoNode.addEventListener(startEvent, function listener() {
    player.ima.initializeAdDisplayContainer();
  }

[Kiro705]

Hi @ckybonist ,

It sounds like the issue might be with your VMAP if the VAST requests are not getting sent. Are you able to included your VMAP or test it using the Video Suite Inspector.

[ckybonist]

@Kiro705

I've test my VMAP on Video Suite Inspector and it behaves normally as expected.

[Kiro705]

Hi @ckybonist ,

I am unable to reproduce your issue. If possible, include steps to reproduce the behavior you are describing or sample code containing the behavior.