[Resolved] Why does my header text show under my video & not overlaid as per description

[rossnmia]

https://docs.generatepress.com/article/page-header-background-video/ gives me instructions for how to add a video:

Text I use in the header element is:

<video loop muted autoplay poster=”https://adventurehelicopters.co.nz/wp-content/uploads/2018/11/427frontpage-1.jpg width=”100%” height=”100%” class=”background-video” width=”100%” height=”100%”>
<source src=”https://adventurehelicopters.co.nz/wp-content/uploads/2019/11/Scenic_Magic.mp4&#8243; type=”video/mp4″>
</video>

<h1>{{post_title}}</h1>

But the header text shows underneath the video and not on top of it. Can you please give me some ideas as to why this might be?

<!– page header –>

[Leo]

Hi there,

Can you try the instructions here?
https://docs.generatepress.com/article/page-hero-background-video/

Let me know 🙂

[rossnmia]

I did exactly that following the instructions on same page already – which is why I can’t figure out what’s wrong or missing.

I added the css to the custom css box and added the other to the website. Worked perfectly before in another site but not with Peak theme.

[Leo]

I’m not seeing a page hero on the page you linked.

Can you double check?

[rossnmia]

It’s on https://adventurehelicopters.co.nz/helicopter-packages/ also has far too much space above and below

The code I added to the site hero area is

<video loop muted autoplay poster=”https://adventurehelicopters.co.nz/wp-content/uploads/2018/11/427frontpage-1.jpg width=”100%” height=”100%” class=”background-video” width=”100%” height=”100%”>
<source src=”https://adventurehelicopters.co.nz/wp-content/uploads/2019/11/Scenic_Magic.mp4&#8243; type=”video/mp4″>
</video>

{post_title}

[rossnmia]

The large gap above and below only shows in safari not chrome.

Sorry missed a bit pasting:

<video loop muted autoplay poster=”https://adventurehelicopters.co.nz/wp-content/uploads/2018/11/427frontpage-1.jpg&#8221; width=”100%” height=”100%” class=”background-video” width=”100%” height=”100%”>
<source src=”https://adventurehelicopters.co.nz/wp-content/uploads/2019/11/Scenic_Magic.mp4&#8243; type=”video/mp4″>
</video>

<h1>{post_title}</h1>

[rossnmia]

Fixed the gaps issue, still no text showing

[Leo]

I’m not seeing the CSS in the documentation being added?

Can you confirm?

[rossnmia]

I added this to the custom css

/*Video*/
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}

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

.background-video-content {
position: relative;
z-index: 1;
}

video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}

THE WHOLE CUSTOM CSS CODE INCLUDING ABOVE SO YOU CAN SEE CONFLICTS

/*Video*/
.background-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}

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

.background-video-content {
position: relative;
z-index: 1;
}

video[poster] {
object-fit: cover;
width: 100%;
height: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title {
display: inline-block;
padding: 10px 15px;
background: #000;
color: #fff;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title:hover {
background: #222;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title .count {
color: #fff;
}
.boxed {
border: 1px white;
background-color: #ffffff;
}
.wt-table-lisst .wt-table td.tb-viewdetails .btn.wt-button {
color: #fffcfc;
}
#wtmain-content ul.products.columns-3 .product-category img {
width: 100%;
}
/*Hide Combos On Tags Page*/

.product-category.product.sales-flash-overlay.woocommerce-text-align-center.woocommerce-image-align-center.do-quantity-buttons {
display: none;
}
/*End Hide Combos On Tags Page*/

body.woocommerce div.product form.cart div.quantity {
display: none;
}
.woocommerce div#product_total_price {
padding: 10px;
margin: 0px;
}
.h1 {
font-size: 45px;
text-transform: uppercase;
font-weight: 600;
text-shadow: 1px 1px 1px black;
}
/*Cart Qty Treetops Variables*/

body.woocommerce div.product form.cart div.quantity {
display: inline;
}
.do-quantity-buttons div.quantity {
display: inline;
}
.quantity {
display: inline;
}
.woocommerce form .quantity.buttons-added .minus {
display: inline;
}
#quantity_5d869ac4238eb.input-text.qty.text {
display: inline;
}
/*End Cart Qty Treetops Variables*/

body.woocommerce div.product form.cart div.quantity {
display: none;
}
.site-header {
display: none;
}
.main-navigation .sticky-logo {
position: absolute;
left: 0;
top: 0;
height: 60px;
}
.main-navigation .sticky-logo img {
height: auto;
}
/*Menu Colored*/

@media (min-width: 769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000;
line-height: 35px;
}
}
@media (min-width: 769px) {
.secondary-navigation .main-nav ul li.nav-button a {
background-color: #ffffff;
border: 2px solid #000000;
color: #000000;
line-height: 35px;
}
}
/*End Menu Colored*/

body.woocommerce div.product form.cart div.quantity {
display: none;
}
.shop-wt-more-meta {
width: 90%;
}
.wt-discount-sif {
display: none;
}
.single-main-navigation {
background-color: #FF6347;
}
.text-shadow .inside-page-hero {
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);
}
.content-background .inside-page-hero {
padding: 2%;
background-color: rgba(0, 0, 0, 0.3);
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);
}
.woocommerce-review-link {
display: none;
}
.woocommerce div.product p.cart {
display: none;
}
@media only screen and (max-width: 768px) {
.single-product.woocommerce #content div.product div.summary {
width: 95%;
}
.single-product.woocommerce #content div.product div.summary {
width: 45%;
}
.woo-tour-accompanied.woo-tour-schedu.col-md-12 {
width: 95%;
}
.wt-disc-info.woo-tour-info.meta-full-style {
width: 95%;
display: none;
}
.woocommerce #content div.product .woocommerce-tabs {
width: 95%;
display: none;
}
.woo-tour-accompanied.col-md-12 {
width: 95%;
}
@media (max-width: 768px) {
h1 {
font-size: 15px;
text-transform: uppercase;
font-weight: 600;
text-shadow: 1px 1px 1px black;
}
@media (min-width: 769px) and (max-width: 1024px) {
h1 {
font-size: 17px;
text-transform: uppercase;
font-weight: 600;
text-shadow: 1px 1px 1px black;
}
.woocommerce div.product p.cart {
display: none;
}
.cart {
display: none;
}
.h1 {
font-size: 45px;
text-transform: uppercase;
font-weight: 600;
text-shadow: 1px 1px 1px black;
}
.profile-img {
border-radius: 50%;
}

/*Hide Mobile*?
*/
@media screen and (min-width: 0px) and (max-width: 700px) {
#div-mobile { display: block; }
#div-desktop { display: none; }
}

@media screen and (min-width: 701px) and (max-width: 3000px) {
#div-mobile { display: none; }
#div-desktop { display: block; }

}

[Tom]

Hi there,

Your CSS must have an error in it. How are you adding the custom CSS? In the Customizer?

Can you deactivate Autoptimize for now so we can see the CSS more clearly?

[rossnmia]

I have disabled it. Which cache and speed plugin is best to use by the way?

Should be able to see CSS now

[Leo]

Do you have parallax turned on?

Can you try turning it off and add some more top and bottom padding to the page hero content?

Both are in the page hero settings.

[rossnmia]

I added 100px top and bottom and there is no parallax setting visible – so I assume it’s off

[rossnmia]

Aha it’s now working.

[Leo]

Glad to hear 🙂

[Author]

Posts