[Resolved] Content (TXT + button) on video backgrodun header

Home Forums Support Content (TXT + button) on video backgrodun header

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1035490
    Robert

    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&#8243; type=”video/mp4″>
    </video>

    but I can’t see the TXT and the buton… 🙁

    #1035492
    Robert

    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&#8243; type=”video/mp4″>
    </video>

    #1035576
    David
    Staff
    Customer Support

    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/

    #1035597
    Robert

    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

    #1035600
    David
    Staff
    Customer Support

    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

    #1035620
    Robert

    Hi – it works now

    thx a lot!

    Robert

    #1035621
    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 ?

    #1036022
    David
    Staff
    Customer Support

    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…..

    #1036030
    Robert

    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

    #1036130
    Robert

    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

    #1036131
    Robert

    .

    #1036371
    David
    Staff
    Customer Support

    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.

    #1036500
    Tom
    Lead Developer
    Lead Developer

    What if you add this?:

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

    Hi

    yep – it display now perfect on IE and Edge

    thx a lot!

    #1037389
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.