Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Assistance with Video Element

Home Forums Support [Resolved] Assistance with Video Element

Home Forums Support Assistance with Video Element

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1965671
    David

    Hi there,

    I am hoping you can assist please? I am working on this webpage, and have included the current iteration of the HTML and CSS further below:-
    https://darkstories.com.au/holidayshow/

    I am just not sure of how to tweak the html/css to achieve the following (I have tried several variations):-

    – For the video to display directly under the menu (currently this is a gap), but keeping the video at around 80% height.
    – There is content that I want to display below the video which is currently displayed in the same section of the page as the video.
    – For the opacity I have left it transparent so you can see the issue, but I will remove opacity as the last step.

    Please let me know if you see any obvious mistakes with the below. Any assistance will be greatly appreciated.

    Best Regards
    David

    HTML
    <video loop muted autoplay poster=”https://darkstories.com.au/wp-content/uploads/2021/10/Zombie-Holiday-Show-Poster_M.jpg&#8221; class=”video” width=”100%” height=”80%”>
    <source src=”https://darkstories.com.au/wp-content/uploads/2021/10/The-Zombie-Holiday-Show.webm&#8221; type=”video/webm”>
    </video>

    CSS
    .video {
    position: absolute;
    top; 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    }

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

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

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

    #1965869
    David
    Staff
    Customer Support

    Hi there,

    just to be clear, should the video element sit between the navigation and the content ?
    If so you can use a Header Element:

    https://docs.generatepress.com/article/header-element-overview/

    And use the HTML you originally have as explained in this doc:

    https://docs.generatepress.com/article/page-hero-background-video/

    Let me know if i understood correctly.

    #1965941
    David

    Hi David,

    Thanks for your help; that approach has resolved everything with the exception of 1 hopefully small issue.

    The Header Element is set up for the page in question, and the HTML and CSS improved from the previous setups.

    However, I am trying to set the height of the video to 80% & width 100% (I am comfortable with cutting a portion of the video), but have not had any success. Is this something you can advise upon too, please?

    Kind Regards
    David

    #1965950
    David
    Staff
    Customer Support

    When you say 80% of the height, do you want to crop the video or distort its content so you still see all of the video but its just been ‘squeezed’ into the space ( i am not sure about this … )

    #1965963
    David

    Hi David, I am looking to crop at 80% height-no distortion. I hope that makes sense.

    Regards
    David

    #1965971
    David
    Staff
    Customer Support

    You could try this:

    1. Edit the header element, and in the element classes field add: video-container
    2. Add this CSS:

    .page-hero.video-container .inside-page-hero {
        max-height: 80vw;
        overflow: hidden;
    }

    Instead of % we’re using VW ( ViewPort Width ) units. This will set the height to 80% of the screen width. Adjust the value to suit.

    #1966885
    David

    Hi David,

    Thanks for the info; I didn’t have much luck with this setting.

    When I got it to have an impact; it reduced the video to a very small box inside a full-width container. I tried other settings e.g.- height: 80vh amongst others.

    For now I have stripped the code clear leaving the video as full size, as I needed to display it to clients in relatively good shape.

    I don’t suppose there are other options that can be considered that you could recommend? I even tried a negative position value at the top level, but could not get any change.

    Sorry to trouble you.

    Regards
    David

    #1966934
    David
    Staff
    Customer Support

    I just added the CSS i provided to the site using the Chrome Developers tools and it worked for me. I had to reduce the 80vw to a smaller size eg. 50vw to see a noticeable difference.

    #1966969
    David

    Thanks David; I’m so sorry. You are correct- I was not setting the value low enough, and have settled on 47vw.

    I really appreciate the assistance, and I hate to be greedy with requests.

    Could you also advise on the vertical alignment please? I was always expecting to lose some video content at the top, but the current settings cutoff from the bottom of the video. Is it possible to do this?

    Lastly(I promise), I’ve also during today decided to add a clickable button(if possible) to the centre of the video. I have created an example, but can only ever get the button to display above the video, or below the video. Would you have any suggestions please?

    Thank you so much for the assistance.

    Kind Regards
    David

    #1967062
    David
    Staff
    Customer Support

    No problems… but lets start over πŸ™‚ Remove any CSS you have so far.

    Then Referring to this document:

    https://docs.generatepress.com/article/page-hero-background-video/

    Add all the HTML, and the CSS provided.
    In this part of the HTML:

    <div class="background-video-content">
        Your Element content in here.
    </div>

    You would add your button like so:

    <div class="background-video-content">
        <a class="button video-hero-button" href="the_link_url_goes_here">Your button text</a>
    </div>

    Once thats in place i can provide some CSS to set the height of the header element and the hopefully position the background video.

    #1967074
    David

    Thank you for your patience. I have made those changes now.

    Kind Regards
    David

    #1967093
    David
    Staff
    Customer Support

    Now try adding this CSS:

    .page-hero.video-container .inside-page-hero {
        display: flex;
        flex-direction: column;
        height: 1000px;
        width: 100%;
        justify-content: center;
        align-items: center;
        max-height: 50vw;
    }

    Again adjust the max-height to suit πŸ™‚

    #1967111
    David

    Thanks David, that all is looking fantastic now. Sorry for the back and forth. I am very grateful for the assistance. Every issue is resolved.

    Best Regards
    David

    #1967127
    David
    Staff
    Customer Support

    Awesome – really glad to hear that!

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.