How to adding a Background Video

Hi there,

You can follow this method from our documentation on how to achieve that:
https://docs.generatepress.com/article/background-video/

The steps are very clear, I wrote the article with screenshots, and most users can follow the steps without issue.

Can you let me know which part or step you don’t understand?

Hi there,

you would need to host the video somewhere else, as you need an absolute link to the video file, and Youtube doesn’t provide that.

Once you have the video file in a place you can stream from you would follow the documentation above.
The Custom HTML you need is this:

<video loop muted autoplay playsinline poster="URL/TO/poster.jpg" class="background-video">
    <source src="URL/TO/video.mp4" type="video/mp4">
</video>

Within the HTML there are sources you need to update:

1. poster="URL/TO/poster.jpg"
This isn option, the SRC Image file will be used as a poster image. This will get displayed if the video doesn’t load.

2. src="URL/TO/video.mp4"
The URL here needs to be updated to the video URL.

1. Thats the correct setting for the Z-Index.

2. You can’t add a Play button a Background Image. It would require custom development to achieve that.

3. select the outer container block and go to the Background. settings:
3.1 Add a Gradient Background
3,2 set the SELECTOR to Pseudo Element.
3.3 set the 2 colors to a transport color of your choice.

This will add a gradient overlay on top of the background video.

4. The quality of the video is set by the video file itself it’s not something we have control over.
How does the video quality look if you just view the URL ? AS you may need a larger video resolution if it’s being stretched to fill the background.