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"> </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
3 Likes
Wow!
Thanks!