Video on Page Header Element

Hi there,

I've checked the home page and I don't see any contents within the page hero that shows the contents in this article.
https://docs.generatepress.com/article/page-hero-background-video/

I only see a WPSP list. Perhaps I'm looking at the wrong page.

Can you point us to the page where you want to apply a page hero with a background video content?

Let us know.

Yes, it is the homepage where I currently have the WPSP list, where I'd like the page header with video. I set the header element display rules to Front Page, and added the CSS on the article you said via the Simple CSS plugin, but for some reason it isn't showing. Let me know :)

Yes, it is the homepage where I currently have the WPSP list, where I’d like the page header with video. I set the header element display rules to Front Page, and added the CSS on the article you said via the Simple CSS plugin, but for some reason it isn’t showing. Let me know

I don't see any page hero with a video content in it within the page source codes.

Did you create a separate header element and added the video content in it? If so, that's not going to work. Only 1 Header element can be applied per page. If you need to hook in more sections, use the Block Element.

Doing what you said worked(almost). The video is playing but the WPSP list is covering it almost completely. How can I have it above the WPSP list(and not behind the WPSP list)?

Let me know :)

Can you link us to a sample page you're applying this on? I'm not sure I'm seeing the right page.

So I can inspect and point you to which ones to set as custom CSS may be needed.

No problem, it's the homepage. I'm seeing the page hero there with the video playing in the background, along with the WPSP Dispatch-like Grid covering it as I mentioned. If you don't see it, could it be the cache in your browser? I've written the link in the private info field. Let me know :)

Ah I see now.

The issue here is that the absolute position div goes haywire. It needs to be wrapped by a <div> that's set to position: relative;

Here's my recommendation:

Use the generate_after_header hook and set the priority to 1.

As for the actual elements, are you using custom HTML block? Can you share with us how you've added it in? So we can give an appropriate answer on how you can wrap the element with a parent set to position: relative;

Let us know.

I added it via the Block element and a custom HTML block containing the video URL and everything. I've put a screenshot of the Block in the backend in the private info field that shows all the details.
Let me know :)

Alright.

Here's what you can do:

On the container element holding the custom HTML block, go to the additional CSS class(es) tab and set relative-container in it like this - https://share.getcloudapp.com/L1udb1dg

You then add this CSS:

.relative-container {
position: relative;
}

Here's how to add css - https://docs.generatepress.com/article/adding-css/

I don't know why but I'm not seeing all the options you showed me on your screenshot. On the container element holding the HTML, I'm only getting "Status and Visibility", Block Element, and Page attributes. Definitely not the Spacing, Colors, Documentation and Advanced options you're seeing. I have put a screenshot in the private info field of this as well.
Let me know :)

Ah I see.

I'm using GenerateBlocks container block.

For your case, just modify your code into this:

<div class="relative-container">
    <video loop="" muted="" autoplay="" poster="URL/TO/poster.jpg" class="background-video">
        <source src="www.yoursite.com/path/to/your/video/file.mp4" type="video/mp4">
    </video>
</div>

replace the URL source with the right one. I've redacted the URL to keep your site private. :)

And modify the CSS into this:

.relative-container {
position: relative;
	width:100%;
	height: 500px;
}

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

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

The relative-container height value controls how big the video will show. Adjust it to your preference.

Great, it worked(almost). 3 questions: 1. How can I move the page hero below my main menu navigation bar, but keep it above the aforementioned WPSP Dispatch-like grid? Currently it's above everything, including my main menu navigation bar.

2. How can I change the color of the adjacent columns that the page hero has at its sides(currently they're grayish black). The grayish-black looks odd, how can I have them be white as the rest of the page? Here's a screenshot of them(I've put them in red circles): https://screencast-o-matic.com/i/crhhnBVe8tM

3. Will the constant autoplaying of the video on the page hero consume too much resources from the server? Do I need to ask my host for more server resources? (with which I would have no problem)

Let me know :)

For #1:

Change the priority value to 20.

For #2:

The background you see is because of the aspect ratio of the video file.
https://share.getcloudapp.com/04uA8Bzg

The site thinks it's part of the video. You may have to edit the video's aspect ratio to deal with this.

For #3:

If your site has a lot of visitors, then yes it will consume a lot of bandwidth because the video is hosted on your server instead of it having a dedicated host for it like Vimeo or Youtube.

I don't know why but changing the priority value to 20 put it *below* the WPSP Dispatch-like grid, not *above* the grid and below my main menu, where I'd like it. I've put a screenshot of this in the private info field.

Let me know :)