[Malleys]

<style>
	
body {
	margin: 0;
}

header {
	height: 200%;
	position: relative;
	overflow: hidden;
}
	
header > section:before, header > * {
	top: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
}
	
header > section:before {
	content: "";
	background: url("https://i.ytimg.com/vi/zf-GMvFd154/maxresdefault.jpg") no-repeat center black;
	background-size: cover;
	display: block;
	height: 100%;
	z-index: -1;
	position: absolute;
}
	
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;
	position: fixed;
	overflow: hidden;
}

header > section > video {
	position: absolute;
	z-index: -1;
}

</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");
	var section = document.querySelector("header > section");
	
	function opacityHandler() {
		var p = document.body.scrollTop / document.body.clientHeight;
		var ratio = Math.max(document.body.clientWidth / video.videoWidth, document.body.clientHeight / video.videoHeight);
		video.style.opacity = Math.min(1, 4 * p);
		video.style.transform = "scale(" + ratio + ")";
		section.style.top = Math.min(1 - p, 0) * document.body.clientHeight;
	}
	
	addEventListener("scroll", opacityHandler);
	addEventListener("resize", opacityHandler);
	video.addEventListener("play", opacityHandler);
	opacityHandler();

</script>