Archived topic
Chance the image to a video in template
1 reply · Started by Alejandro Valencia on July 6, 2022
Hello Generatepress Family, I want to install this template (Feather), but I want to change the image at the top of the page to a video, can you tell me how to do it? thank you!
Hi there,
It's possible, try the following steps:
1. Select the container block which contains the image, and remove the background image.
https://docs.generateblocks.com/article/container-overview/#backgrounds
2. Add a custom HTML block with this HTML code, replace URL TO YOUR VIDEO with your video URL.
<video loop muted autoplay playsinline class="background-video">
<source src="URL TO YOUR VIDEO" type="video/mp4">
</video>3. Add a custom CSS class to the Container block: background-video-container:
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
4. Add this CSS to customizer > addtional CSS:
.background-video {
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
object-fit: cover;
width: 100%;
height: 100%;
}
.background-video-container > .gb-inside-container {
flex: 1;
}
.hero-container {
overflow: visible;
}