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

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.

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>

Fixed the gaps issue, still no text showing

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; }

}

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

Should be able to see CSS now

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