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

Home Forums Support Why does my header text show under my video & not overlaid as per description

  • This topic has 14 replies, 3 voices, and was last updated 10 months ago by Leo.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1073398
    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 –>

    #1073929
    Leo
    Staff
    Customer Support
    #1074400
    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.

    #1074925
    Leo
    Staff
    Customer Support

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

    Can you double check?

    #1075295
    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}
    #1075298
    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>
    #1075300
    rossnmia

    Fixed the gaps issue, still no text showing

    #1075320
    Leo
    Staff
    Customer Support

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

    Can you confirm?

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

    }

    #1078397
    Tom
    Lead Developer
    Lead Developer

    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?

    #1080548
    rossnmia

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

    Should be able to see CSS now

    #1080591
    Leo
    Staff
    Customer Support

    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.

    #1080627
    rossnmia

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

    #1080628
    rossnmia

    Aha it’s now working.

    #1080647
    Leo
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.