Content (TXT + button) on video backgrodun header

again the code becouse I cant see all of tchem:

<video loop muted autoplay poster="zzz.jpg" class="background-video">

< d i v class="background-video-content">
<h1>SKORO TU JETEŚ, TO ZNACZY, ŻE MARZYSZ O AFRYCE...</h1>
ZADZWOŃ DO NAS
</ d i v>

<source src="http://www.vicktina.com/wp-content/uploads/2019/10/Bez-tytułu.mp4" type="video/mp4">
</video>

Hi there,

the DIV needs to be outside of the video element - follow the instructions here:

https://docs.generatepress.com/article/page-hero-background-video/

Hi

I tryed allready - but if the DIV is outside of the video element its
under the Video like now: http://www.vicktina.com/kontakt/

but I wanna to have it on the video
- it's passible?

Kr
Robert

You need to apply the CSS that was provided in the document i linked to. And make sure that the Header Element is set to Full Height

Hi - it works now

thx a lot!

Robert

uj… Im litle too fast happy:

the video haeder works OK on opera, FF and chrome

but on IE and EDGE its not full width
- is there any passibility to repair it on the two browsers ?

Hmm... tricky one.

Instead of this CSS:

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
}

try:

.inside-page-hero {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    min-height: 100%;
    min-width: 100%;
    -webkit-transform-style: preserve-3d;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: 100%;
    object-fit: cover;
}

If it works it will probably break the elements content.....

Hi...

the CSS code looks now:

@media (max-width: 768px) {
.page-hero.home-hero {
background-position: 60% 0;
}
}

.inside-page-hero {
position: absolute;
top: 0;
left: 0;
z-index: 1;
min-height: 100%;
min-width: 100%;
-webkit-transform-style: preserve-3d;
}

.background-video {
position: absolute;
top: 0;
left: 0;
z-index: 1;
min-height: 100%;
min-width: 100%;
height: auto;
width: 100%;
object-fit: cover;
}

.page-hero {
position: relative;
overflow: hidden;
}

.background-video-content {
position: relative;
z-index: 1;
font-weight: 400;
text-shadow: 1px 5px 4px rgba(0, 0, 0, 0.5);
font-size: 15px;
}

.button
{
position: relative;
z-index: 1;
color: #000000;
text-shadow: 1px 5px 4px rgba(0, 0, 0, 0.5);
font-size: 15px;
}
video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}

#site-navigation{
border-bottom:0px solid #cdcdcd;
}

nav#site-navigation {
position: absolute;
width: 100%;
background-color: #ffffff;
top: 80;
z-index: 9999;
}

but the video header on IE and Edge aren't still full width

Hi again,

I dont know if its helps but I found this homepage
with a video haeder which works on IE / Edge...

http://www.africaline.pl/

Thx
Robert

.

That site is using Javascript to recalculate the container size so its not a simple case of using the same CSS.
I am not sure if there is an easy solution to this. I'll have Tom take a look.

What if you add this?:

.background-video {
    height: auto !important;
}

Hi

yep - it display now perfect on IE and Edge

thx a lot!

You're welcome :)