Background Video Questions

Get Started
1

First and foremost, yes I could spend 40 minutes digging through the forums to try and find information about this, but I have googled it for the past 20 and haven’t come up with much. I also retain more information discussing things. And this is something I’d like to learn.

Anyway, onto the problem… I really would like to replicate something as seen in https://www.desktimeapp.com/
With the looped video in the background of a content header… I’m working with wordpress and I don’t really understand how to accomplish this.

Thanks,
-Lane

2

Hi Lane. In essence, this looks pretty simple. There is and HTML5 <video> element, with two divs placed over the top of it. The video is set to position: fixed and has opacity set on it to make is seem semi transparent.

For some reason, the site is using JS to serve up the video, which isn’t really necessary, so I’m not sure why they are doing that.

3

That is just the answer I was looking for at the time! Thanks so much!

I’m having trouble understand what my problem is though. I need to display a <div> over the video that has a background color (and transparency) like they did in the site above.
My current HTML markup is

			<div id="video-container">
				<div id="head-video">
					<video class="head-video"	src="/wp-content/themes/bones/library/images/splash.mp4" autoplay muted loop></video>
				</div>
				<div id="left-video">
				</div>
				<div id="right-video">
				</div>
			</div>

With my CSS as follows

#video-container	{

	}
#head-video	{
	top: 300px;
	height: 400px;
	overflow: hidden;
    z-index:0;
	}
video.head-video	{
	width: 100%;
	}
#left-video {
	background-color: #333333;
    top:0;
    left:0;
    z-index:1;
	}
#right-video {
	float: right;
	display: none;
	}
4

I guess we’d need to know more specifically what you need here, as there are lots of considerations. This is a rough experiment, and probably has a lot of flaws, but I don’t know what I’m aiming for …

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {margin: 0; padding: 0;}

.video-container	{
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
}

video {
	width: 100%;
}

.left {
	background: rgba(51,51,51,0.2);
	left: 0;
}

.right {
	background: rgba(0,200,215,0.2);
	right: 0;
}

.video {
	height: 400px;
	width: 50%;
	position: absolute;
	top: 0;
	text-align: center;
	color: white;
	font-size: 3em;
}

</style>
</head>
<body>

<div class="video-container">
	<video src="/wp-content/themes/bones/library/images/splash.mp4" autoplay muted loop></video>
	<div class="video left">
	text
	</div>
	<div class="video right">
	text
	</div>
</div>
	
</body>
</html>