How to do a text overlay on an mp4 background

Wappler General Need Help
1

I have tried numerous ways to make the red text be centered on the page without the mp4 background vanishing. Any suggestions are appreciated.

Screen Shot 2021-01-29 at 7.01.10 PM
Screen Shot 2021-01-29 at 7.01.10 PM5994×3402 1.85 MB

2

This is an example HTML

<div is="dmx-background-video" id="bgvideo1" src="assets/videos/bgVideo.mp4">
	<div class="container">
		<div class="row full-height align-items-center text-light">
			<div class="col">
				<div class="col-12 col-md-10 col-lg-8 offset-lg-1 col-xl-6 lead offset-xl-1">
					<h1 class="display-3 text-danger">Meeting your needs<br><small class="text-muted">(Under construction)</small></h1>
				</div>
			</div>
		</div>
		<div class="row d-none d-md-flex"><a href="#content" class="text-light"><i class="fa fa-chevron-circle-down fa-3x chevron-down"></i><span class="sr-only">Scroll down</span></a></div>
	</div>
</div>~

and the CSS

div.row.full-height {
    min-height: calc(100vh - 50px);
    display: relative;
}
.chevron-down {
    position: absolute;
    bottom: 20px;
    width: 100%;
    left: 0;
    right: 0;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
3

Ben, Thank you. I will try that in the morning.

4

Hi Ben,

I cut and pasted your code in HTML and CSS. Same problem Background doesn’t display.

Screen Shot 2021-01-30 at 8.43.16 AM
Screen Shot 2021-01-30 at 8.43.16 AM6006×3394 1.11 MB

5

Probably nothing to do with anything (I’m quite well known for useless answers) but what happens if you click the little lightning bolt to toggle App Connect Mode? Also delete any cache and temp files. See if that helps at all? I noticed in the top image it is engaged and in the above image its not.

6

Thanks, Dave.

I tried toggle app mode followed by Preview app. Nothing. Then I refreshed and surprise, it appears. When I wish to preview it in localhost Docker, the text appears but not the movie. Any suggestions for this issue?

7

I’m happy you got it displaying so easy to waste so much time when things like this occur. Unfortunately I’m not that familiar with Docker (yet) so can’t advise there I’m afraid. At least you have narrowed it down so should be a lot easier for others to contribute to resolving the issue.

:slight_smile:

1 Like