Page 1 of 1

HTML5-Video player

Posted: Tue Jul 28, 2020 9:41 am
by 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

Re: HTML5-Video player

Posted: Tue Jul 28, 2020 9:57 am
by 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?

Re: HTML5-Video player

Posted: Tue Jul 28, 2020 10:12 am
by alex4orly
Pablo wrote: Tue Jul 28, 2020 9:57 am 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

Re: HTML5-Video player

Posted: Tue Jul 28, 2020 10:27 am
by 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.

Re: HTML5-Video player

Posted: Tue Jul 28, 2020 10:31 am
by 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

Re: HTML5-Video player

Posted: Tue Jul 28, 2020 11:14 am
by 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.

Re: HTML5-Video player

Posted: Tue Jul 28, 2020 11:43 am
by 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

Re: HTML5-Video player

Posted: Tue Jul 28, 2020 11:54 am
by 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.

Re: HTML5-Video player

Posted: Tue Jul 28, 2020 12:33 pm
by 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

Re: HTML5-Video player

Posted: Tue Jul 28, 2020 12:42 pm
by 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>

Re: HTML5-Video player

Posted: Tue Jul 28, 2020 8:34 pm
by 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

Re: HTML5-Video player

Posted: Wed Jul 29, 2020 6:37 am
by 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.

Re: HTML5-Video player

Posted: Wed Jul 29, 2020 7:02 am
by 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

Re: HTML5-Video player

Posted: Wed Jul 29, 2020 7:22 am
by Pablo
All object on the page are floating, except for he media player whihc is fixed/absolute.
Fixed objects overlap floating elements.

Re: HTML5-Video player

Posted: Wed Jul 29, 2020 8:01 am
by alex4orly
OK, if so - how is the video clip running in the background and NOT covering the other floating objects?

I am confused

Re: HTML5-Video player

Posted: Wed Jul 29, 2020 9:02 am
by Pablo
Because the z-index was removed.

Re: HTML5-Video player

Posted: Wed Jul 29, 2020 9:54 am
by 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

Re: HTML5-Video player

Posted: Wed Jul 29, 2020 10:06 am
by Pablo
Sorry, I do not know how to explain it better. This is just how HTML works.