How can I make a mp4 video background on my application?
I’ve been trying to achieve this since Cuba platform and only been able to do it with a .webp file.
Thank you.
Hi,
Could you describe your task in more detail? Should it be for a specific screen, main screen, login screen?
Regards,
Gleb
I want an mp4 video background for the entire application.
I’m not sure that having mp4 video background for the entire application is achievable because some components and layouts have background color.
Can this color be transparent 90%?
it is possible, but still come components will require additional styling.
In order to use video as a background, I’d recommend using BootstrapListener
as an easiest solution:
-
Create
VAADIN
folder in project resources and place your video there. -
Implement custom
BootstrapListener
:
import com.vaadin.server.BootstrapFragmentResponse;
import com.vaadin.server.BootstrapListener;
import com.vaadin.server.BootstrapPageResponse;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.springframework.stereotype.Component;
@Component("demo_CustomBootstrapListener")
public class CustomBootstrapListener implements BootstrapListener {
@Override
public void modifyBootstrapFragment(BootstrapFragmentResponse response) {
}
@Override
public void modifyBootstrapPage(BootstrapPageResponse response) {
Document document = response.getDocument();
Element body = document.getElementsByTag("body").get(0);
Element video = document.createElement("video");
video.attr("autoplay", true);
video.attr("muted", true);
video.attr("loop", true);
video.attr("style", "object-fit: cover;" +
"height: 100%;" +
"width: 100%;" +
"position: absolute;" +
"top: 0;" +
"left: 0;"
);
Element source = document.createElement("source");
source.attr("src", "VAADIN/video/rain.mp4");
source.attr("type", "video/mp4");
video.appendChild(source);
body.insertChildren(0, video);
}
}
- In a theme extension make background on the most components almost transparent (I assume that you’re using the Helium theme):
--background-color: rgba(255, 255, 255, 0.1);
--app-background-color: rgba(255, 255, 255, 0.1);
&.dark {
--background-color: rgba(34, 47, 62, 0.1);
--app-background-color: rgba(34, 47, 62, 0.1);
}
In my case I got the following result:
As you can see some components require tuning, but it’s a good starting point.
Regards,
Gleb
exactly what I was looking for !!! Balshoi Spasibo