MP4 file for background

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:

  1. Create VAADIN folder in project resources and place your video there.

  2. 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);
    }
}
  1. 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:

Screenshot 2022-07-01 at 15.28.41

As you can see some components require tuning, but it’s a good starting point.

Regards,
Gleb

3 Likes

exactly what I was looking for !!! Balshoi Spasibo