Adding a background video

Questions
1

I added a video to the Media folder. How can I use it as background for the login screen?
I also tried with a web component but I do not know how to reference that file in the Media folder.

Thanks

2

Hi,

I had a quick play as I was curious myself on how easy this would be.
This is the result of my attempt: [attachment=0]video_example.servoy[/attachment]

What steps did I take:

  1. Create a form with a label (name: lbl_bg_video’) that covers the whole page (in my case a form type ‘css position layout’ with the label css position set to: ‘0,0,0,0,-1,-1’)
  2. Set the styleClass of the label to: ‘video-wrapper’ and the showAs-property to 'trusted_html
  3. Create an onShow function on the form and attach it to the onShow event handler of the form
  4. Insert below code in the onShow function
	var _sTemplate = '<video playsinline autoplay muted loop><source src="[MEDIA_URL]" type="[MIME_TYPE]">Your browser does not support the video tag.</video>';
	var _sMediaName = 'sample_video.webm';
	var _sMediaURL = application.getMediaURL(_sMediaName).replace(/\?.*$/, '');
	var _sMimeType = solutionModel.getMedia(_sMediaName).mimeType;
	
	var _sHtml = _sTemplate.replace(/\[MEDIA_URL\]/, _sMediaURL).replace(/\[MIME_TYPE\]/, _sMimeType);
	
	elements.lbl_bg_video.text = _sHtml;
  1. Set the ‘_sMediaName’-variable with the name of your video
  2. Add the following css to your solutions css/less stylesheet:
video {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.video-wrapper {
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

This is it and after launching the client, you should see the video playing.

Hope this helps

video_example.servoy (1.02 MB)

3

Thank you Marc!

4

Done!

https://www.loom.com/share/7a0ca0d6f50a … b25488779f

5

Nice!
Glad that worked out for you :-)