Gif or video as a background for layout

Hello everyone!
I hope this is the place to ask:
I want to embed a video or gif image as a background for our app.
Has anyone ever tried this, and can help?
Is this even possible in tadabase?

This is doable and really simple to implement. Check it out:

On the layout page, add an HTML component. In the source code of that component, insert this code:

<section class="showcase"><video src="{Insert your own video or gif link here}" autoplay="autoplay" loop="loop" muted=""></video>
<div class="overlay">&nbsp;</div>
</section>

Make sure you update the {Insert your own video or gif link here} with your own link.

Then on the CSS page of the layout, add this code:

.showcase
{
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  transition: 0.5s;
  z-index: -1;
}

.showcase video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}
.overlay
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #03a9f4;
  mix-blend-mode: overlay;
}

That’s it, let me know how it works out for you!

2 Likes

ScreenCaptureProject13_5

3 Likes

Wow!
Thanks!