[Malleys]

<style>
body {
	margin: 0;
}

header {
	height: 200vh;
	background: black;
	position: relative;
}
	
header::before, header > * {
	position: sticky;
	top: 0;
	bottom: 0;
	height: 50%;
	width: 100%;
}
	
header::before {
	content: "";
	background: url("https://i.ytimg.com/vi/zf-GMvFd154/maxresdefault.jpg") no-repeat center center / cover;
	display: block;
}
	
header > section {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: white;
	text-shadow: 0 0 2px black;
	font-family: system-ui;
	overflow: hidden;
}

header > section > video {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	object-fit: cover;
}

</style>

<header>
	<section>
		<video src="https://www.w3schools.com/html/mov_bbb.mp4" loop muted autoplay></video>
		<section>
			<h1>Hello!</h1>
		</section>
	</section>
</header>
<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est alias ipsam voluptatem impedit explicabo, dicta illo ipsa vitae odio harum eum tempore doloremque omnis doloribus repudiandae, suscipit saepe unde expedita.</p>
</div>

<script>
	var video = document.querySelector("header > section > video");
	
	function opacityHandler(event) {
		video.style.opacity = Math.min(1, 4 * document.body.scrollTop/document.body.clientHeight);
	}
	
	addEventListener("scroll", opacityHandler);
	opacityHandler();

</script>