[Resolved] Where do I add the page hero video code?

Home Forums Support [Resolved] Where do I add the page hero video code?

Home Forums Support Where do I add the page hero video code?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2000970
    Andy

    Hi there,

    I’ve been reviewing this help file:
    https://docs.generatepress.com/article/page-hero-background-video/

    1. Although, I don’t understand where to add this code in the Element?

    <video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video">
        <source src="URL/TO/video.mp4" type="video/mp4">
        <source src="URL/TO/video.webm" type="video/webm">
        <source src="URL/TO/video.ogv" type="video/ogv">
    </video>
    
    <div class="background-video-content">
        Your Element content in here.
    </div>

    2. Can I also overlay the video with a Headline? “Welcome to our site”

    3. How do I control the hieght size of the video page hero on the homepage?

    Screenshot here, where do I add the code on this page? Thank you

    View post on imgur.com

    #2001000
    Elvin
    Staff
    Customer Support

    Hi Andy,

    Place a Container block first to serve as the Page Hero’s main container.

    Within this container, add a Custom HTML block.

    On this Custom HTML block you can place the code you’ve provided. 😀

    Note: That’s just one part of it. As for the CSS, here’s how to add it to your site –
    https://docs.generatepress.com/article/adding-css/

    A wise man once said:
    "Have you cleared your cache?"

    #2001006
    Andy

    1. Thank you, how do I control the height size of this container? The video just expands like crazy on the homepage. I tried playing with the padding of the container but nothing responds to make it smaller. Thoughts? I shared the URL.

    View post on imgur.com

    2. I’ve also kept my homepage content intact in order to show a button and headline. That is correct logic right? If I want to overlay content on the video?

    View post on imgur.com

    #2001011
    Elvin
    Staff
    Customer Support

    1. Thank you, how do I control the height size of this container? The video just expands like crazy on the homepage. I tried playing with the padding of the container but nothing responds to make it smaller. Thoughts? I shared the URL.

    Consider adding page-hero-wrapper on your Container Element’s Additional CSS Class(es) text field on the Advanced tab.

    you then add this CSS:

    .page-hero-wrapper { position: relative; }

    This is so the video is bounded relative to the page-hero section only.

    2. I’ve also kept my homepage content intact in order to show a button and headline. That is correct logic right? If I want to overlay content on the video?

    Yes that should be fine.

    A wise man once said:
    "Have you cleared your cache?"

    #2001025
    Andy

    Thank you so much Elvin, got it!

    #2001027
    Elvin
    Staff
    Customer Support

    No problem. Let us know if you need further help. 😀

    A wise man once said:
    "Have you cleared your cache?"

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