HTML5-Video player

[alex4orly]

I am trying to use this object to run a clip as a background to a web site.
It works as expected on a new page, but when trying to add the elemnts / objects of the page - it covers the page and the objects are hiddent behind it. Didn't help when I tried to push it to the back...

So, I thought, I will place the video in it's own LAYER... That was NOT enough - I had to place all the page objects into their own layer.

BUT - now, even though I have set some breakpoints to make it responsive (all the objects are inside Layout grids) - it is no longer responsive.

I painted the layer just for now in RED, so that you can see what I mean : https://squadron-125.org.il/BGvideo.html
And the actual website for comparison : https://squadron-125.org.il/home.html (using the RZ video background player)

Hope someone can give me an idea, how to resolve this, or how to setup the Layer...

Thanks

[Pablo]

I cannot see what you have done based on the published page.
To be able to help you I need a demo project (wbs).

Also, can you please describe which object are problematic?

[alex4orly]

I cannot see what you have done based on the published page.
To be able to help you I need a demo project (wbs).

Also, can you please describe which object are problematic?

Here is a single page project file : https://squadron-125.org.il/sq125_home.wbs
If you look at the LIVE site, you will see that reducing the browser width is responsive, but this one is NOT

Hope you can help me

Thanks

[Pablo]

You have nested layers with layout grid. This is not correct.
A layer is fixed/absolute container.
A layout grid is flexible container.
These cannot be nested.

Also, a background video should not be on a layer. It must be a direct child element of the page otherwise it's restricted to its container.

[alex4orly]

Part 1
If I don't place the elements in a layer, the clip covers them, instead of running as background.
Part 2
Not clear.

You understand what I am trying to achieve.
So what is the correct way?

Thanks

[Pablo]

I understand you want the video to play in the background, covering the entire page?
In that case, the video should not be a on layer.

A layout grid cannot be nested in a layer.

[alex4orly]

Ok, I didn't intend it to be in a layer
But, when it is on the page on it's own, it runs in the foreground and cover all the objects on that page.

Not do I want all the objects to be inside a layer.

So, how can I force the video to be behind? In the background.

This, will stop me from moving to Light 'n Easy, and I really want to move to it.

Thanks

[Pablo]

When I move the video outside the layer, it works for me.
Where on the page do I need to look for the problem?
What are the IDs of the objects that are problematic?

Or else, share a demo project which demonstrates the problem.
Make sure the project does not have any content that is not relevant to the problem, so there cannot be any misunderstanding where to look.

[alex4orly]

OK, here is a demo project : https://squadron-125.org.il/sq125_home.wbs

There are no more any Layers, just the objects I need.

The video clip plays OK, but covers the content

Thanks

[Pablo]

The reason why the video covers the other content is because floating elements (like layer grids) do not have a z-index. So, in this case the video is the only element with a z-index and therefor it's on top of everything else.

There are two solutions I can think of:
1. In the page properties ->advanced, disable "use z-index' for object order.

2. Or else add this between the head tags of the page HTML:

Code: Select all

<style>
#wb_MediaPlayer1
{
   z-index: -1 !important;
}
</style>

[alex4orly]

OK, in my sample project - the 1st one works, in my LIVE project, the 2nd one works

But, I want to understand why? How does the video clip "Position" itself at the back?

I am trying to learn

Thanks for your help

[Pablo]

Normally,in a fixed/absolute layout, objects are positioned via the z-index.
However, floating objects do not have a z-index because they do not overlap. So, the order is determined by the order of the objects on the page.

[alex4orly]

OK, lets see if I understand correctly

The order is based in order of adding objects to the page?
I added the HTML5 object the last - after the page was already completed, but it is now running in the background - NOT on top...

Or maybe, becasue ALL the objects on the page are "Floating" and therefore they are on the top?

???

Thanks again

[Pablo]

All object on the page are floating, except for he media player whihc is fixed/absolute.
Fixed objects overlap floating elements.

[alex4orly]

OK, if so - how is the video clip running in the background and NOT covering the other floating objects?

I am confused

[Pablo]

Because the z-index was removed.

[alex4orly]

Yes, I know that, but this object is the last one added to this page, how come it is not on the top?

Thanks again

[Pablo]

Sorry, I do not know how to explain it better. This is just how HTML works.