-
Hello Support,
I made a website with GeneratePress Pro and Classic Editor, no Gutenberg, no Beaver Builder.
Instead of the image, there should be a video in den header.
The rest should be the same, the image in the header, just like it is now but instead of the image, there should be a video.I have installed Generate Blocks (free version) but I can’t see, how this can help with the video (Classic Editor, no Gutenberg). So how can I do it?
Thanks, @Brisch
-
Hi there,
GenerateBlocks is built for the Block Editor (Gutenberg), so it won’t work with the Classic Editor.
Since your site is still using the Classic Editor, adding a background video would require a custom solution. I personally haven’t done this before in the Classic Editor and, to be honest, I don’t have the expertise to implement it in that context.
-
Hi there,
so you are telling me, it is not possible with GeneratePress to have a video in the header, if I dont’ use Gutenberg? Really?
-
GP and GP Premium are for global style control; NEITHER can generate content.
It will require writing custom code, so we would strongly recommend using the block editor.
-
Really???
If there is a free position, you can hire me as a support member for GeneratePress!If you have to adjust the header to a video then it is absolute possible with elements.
Here is the code:
Elements:
<div class=”hero-video-wrapper”>
<video autoplay muted loop playsinline id=”hero-video”>
<source src=”https://www.xxx.click/wp-content/uploads/2025/05/xxx.mp4″>
</video><div class=”hero-overlay”>
</div>
</div>Additional CSS:
/* Video */
.hero-video-wrapper {
position: relative;
width: 100%;
height: 70vh; /*Höhe nach Wunsch*/
overflow: hidden;
z-index: 1;
}.hero-overlay {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: flex-end;
height: 100%;
padding-bottom: 50px;
}#hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
@media (max-width: 767px) {
.hero-overlay img {
width: 30%;
}
.hero-video-wrapper {
height: 60vh;
}
} -
So you figured it out? Great!
- You must be logged in to reply to this topic.