Overlaying images on a video

Continuing the discussion from Problem Layer order (z-index) [1.7.2]:

At the risk of opening up an old topic, this recently came up in a private communication. Z-index’s on the background where originally put in place so that you could have a background image that appears on top of everything.

The idea was to have a normal looking layout PNG with transparent regions instead of solid colour. This could then me placed on top of all other content (allowing a window through to the other images, videos, etc).

We found that this only worked on some devices and not all - hence saying it was not supported.

1 Like

I can overlay anything on video with no problems…

Actually, all my news and forecast are this way. I have a Logo animation in and out, but I keep the videos as background, so I have no gap between the timeline changes.

To do this, I don’t even change the z-index options. I just create the regions on the correct order (first I create the video region and after the title and images regions).

1 Like

I found the same, but only on Android Clients

1 Like

Great - pleased to know of two more cases where it is working as intended.

Just a note.

I think that, at least for Android, the need to create the layouts in the order you want them to be on top of each other in, can be fixed. I remember a post about 3 months back about the Z indexes being change if one of the regions was moved, and this would then break the ability to display the regions correctly on Android. You would then need to either start over or carefully reset each regions index with out moving it by clicking and dragging the region. ( You can however move the regions manually by keying in the coordinates without breaking the Z-Index order. This was true for at least 1.7.3, as I have not tested this in a new version. )

That should have been resolved now that you can specify the layer on the region…

The Android player should obey layers in the latest version (and a few before that, but I can’t remember exactly when)…

Still running version 1.7.3 at the moment. When I get to a good spot to migrate my API work I might try 1.7.4. But more than likely I will wait till 1.8 to try and do that.

But as for 1.7.3, the problem is definitely still there.

Could you please tell how you kept video as background ?


I think I can see how this might be confusing.

It is not the background that is under the the “Options” drop down within the layout designer, that I am talking about. I am actually talking about making my first region on the layout, full screen and using video for the content. It will have a z-index of 1. I then create other regions on top of the first, sized to whatever other content I need to overlay and they get assigned z-indezes of 2,3,4 and so on. Higher z-indexed regions are stacked on top of the lower regions.

Just to note… you don’t want to many of these stacked on each other. Also want to keep the number of regions as low as possible. More regions and stacking = More CPU and Memory = Slower transitions, loading, and Possible jumpy videos

Last Note… I only know that this works on the hardware we are using and Android Client.

i try to follow your instruction, but didnt work

  1. create the first region with video content and put 1 in z index (full screen region)
  2. create the second region with image inside (smaller region) and put 2 (also trying 100) in z index
  3. save position.
  4. check the layer index, but the number i put before nothing there…
  5. i try to play on xibo player, only appear the video.

any input for me?
i’m using 1.7.8


Seems like I had the Z-index disappearing problem at one time. However, if I remember correctly, it was due to moving a region with the mouse after setting the index. I don’t know if that helps.

I also remember at some point this was a problem in the CMS, but that was fixed at some point and should not be a problem if you are using the latest CMS version. I would also recommned using Chrome, if you are not, when using the CMS.