- This topic has 14 replies, 3 voices, and was last updated 4 years, 5 months ago by Tom.
-
AuthorPosts
-
October 15, 2019 at 10:26 am #1035490Robert
Hi
I made on http://www.vicktina.com/kontakt/ a background Video header
I wanna put some TXT + buton on the video
I wrote this code ins GP: CSS:
.background-video {
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
}video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}.background-video-content {
position: relative;
z-index: 2;
font-weight: 800;
text-shadow: 1px 5px 4px rgba(0, 0, 0, 0.5);
font-size: 40px;
}And this ins Elements – Header:
<video loop muted autoplay poster=”zzz.jpg” class=”background-video”>
<h1>SKORO TU JETEŚ, TO ZNACZY, ŻE MARZYSZ O AFRYCE…</h1>
ZADZWOŃ DO NAS<source src=”http://www.vicktina.com/wp-content/uploads/2019/10/Bez-tytułu.mp4″ type=”video/mp4″>
</video>but I can’t see the TXT and the buton… 🙁
October 15, 2019 at 10:28 am #1035492Robertagain 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>October 15, 2019 at 12:07 pm #1035576DavidStaffCustomer SupportHi there,
the DIV needs to be outside of the video element – follow the instructions here:
https://docs.generatepress.com/article/page-hero-background-video/
October 15, 2019 at 12:22 pm #1035597RobertHi
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
RobertOctober 15, 2019 at 12:25 pm #1035600DavidStaffCustomer SupportYou 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
October 15, 2019 at 1:01 pm #1035620RobertHi – it works now
thx a lot!
Robert
October 15, 2019 at 1:04 pm #1035621Robertuj… 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 ?October 16, 2019 at 4:01 am #1036022DavidStaffCustomer SupportHmm… 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…..
October 16, 2019 at 4:13 am #1036030RobertHi…
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
October 16, 2019 at 5:56 am #1036130RobertHi again,
I dont know if its helps but I found this homepage
with a video haeder which works on IE / Edge…Thx
RobertOctober 16, 2019 at 5:57 am #1036131Robert.
October 16, 2019 at 7:56 am #1036371DavidStaffCustomer SupportThat 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.October 16, 2019 at 10:48 am #1036500TomLead DeveloperLead DeveloperWhat if you add this?:
.background-video { height: auto !important; }
October 17, 2019 at 12:25 am #1036917RobertHi
yep – it display now perfect on IE and Edge
thx a lot!
October 17, 2019 at 9:45 am #1037389TomLead DeveloperLead DeveloperYou’re welcome 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.