popout video

index.html

<div class="intro">
	<div class="popout-video">
		<video src="https://ice-creme.de/codepen_live_view.mp4" playsinline controls class="intro-video" preload="auto" type="video/mp4" autoplay muted></video>
		<div class="popout-video__controls">
			<div class="close-video"></div>
		</div>
	</div>
</div>

<div class="content">
	<span>scroll down</span>
	<h1>Lorem ipsum</h1>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, et. Et deserunt debitis sequi. Consectetur, saepe omnis! Minus quam magni error sapiente, ipsam laboriosam expedita omnis cum ducimus, recusandae amet!
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, tempore. Nulla facere animi cumque perspiciatis, sit vero ratione rem, sequi voluptatum adipisci itaque dignissimos eum, dolorum ad pariatur accusantium temporibus.
	</p>
	<h2>Dolor sit amet</h2>
	<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quaerat quo eos dolorum, tempore autem tempora vel magnam neque, cum sint dolorem ducimus, nam nostrum necessitatibus saepe quam possimus accusantium.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae consectetur deleniti, nostrum corporis recusandae non quasi est error quaerat quo delectus cum hic distinctio omnis nobis laboriosam esse saepe facilis.
	</p>
	<p>
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate dolore doloremque sapiente culpa animi ea aperiam, veritatis numquam dicta, voluptate ullam in consequatur explicabo, ducimus sit ab. Quo, saepe excepturi.
	</p>
	<h3>Consectetur adipiscing</h3>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consequatur blanditiis veniam qui pariatur consectetur numquam, praesentium aliquid voluptatibus magnam sed veritatis quasi nisi ipsam, distinctio a rerum vero rem.
	</p>
	<p>
		Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus rem saepe porro nam corporis dolores aliquid numquam, at culpa? Quis fuga deserunt quas ut quia voluptas commodi modi aspernatur velit?
	</p>
</div>

popout-video.markdown

popout video

A Pen by creme on CodePen.

License.

script.js

console.clear();

document.addEventListener('DOMContentLoaded', function() {
	const introContainer = document.querySelector('.intro');
	const videoContainer = introContainer.querySelector('.popout-video');
	const video = videoContainer.querySelector('video');
	let videoHeight = videoContainer.offsetHeight;

	const closeVideoBtn = document.querySelector('.close-video');

	let popOut = true;
	
	introContainer.style.height = `${videoHeight}px`;

	window.addEventListener('scroll', function(e) {
		if (window.scrollY > videoHeight) {
			// only pop out the video if it wasnt closed before
			if (popOut) {
				videoContainer.classList.add('popout-video--popout');
				// set video container off the screen for the slide in animation
				videoContainer.style.top = `-${videoHeight}px`;
			}
		} else {
			videoContainer.classList.remove('popout-video--popout');
			videoContainer.style.top = `0px`;
			popOut = true;
		}
	});

	// close the video and prevent from opening again on scrolling + pause the video
	closeVideoBtn.addEventListener('click', function() {
		videoContainer.classList.remove('popout-video--popout');
		video.pause();
		popOut = false;
	});
	
	window.addEventListener('resize', function() {
		videoHeight = videoContainer.offsetHeight;
		introContainer.style.height = `${videoHeight}px`;
	});
});

style.scss

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	width: 100%;
	height: 100%;
  font-size: 18px;
}

body {
  width: 100%;
  min-height: 100%;
  display: flex;
	flex-direction: column;
	align-items: center;
}

.intro {
	width: 100%;
	background: rgba(100,100,100,.1);
	position: relative;
}

.popout-video {
	width: 100%;
	position: relative;
	
	&--popout {
		position: fixed;
		left: 0;
		top: 0;
		width: 450px;
		max-width: 100%;
		height: auto;
		animation: popin .5s ease-in-out forwards;
		
		@keyframes popin {
			to {
				top: 0;
			}
		}
		
		&:hover {
			.popout-video__controls {
				opacity: 1;
			}
		}
	}
	
	video {
		width: 100%;
		vertical-align: middle;
	}
	
	&__controls {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: .5rem;
		background: rgb(0,0,0);
		background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
		z-index: 1;
		display: flex;
		justify-content: flex-end;
		opacity: 0;
		transition: opacity .25s ease;
		pointer-events: none;
		
		.close-video {
			width: 1.77rem;
			height: 1.7rem;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
			pointer-events: all;
			border-radius: 50%;
			transition: background .25s ease;
			
			&:hover {
				background: rgba(50,50,50,.4);
			}
			
			&:before, &:after {
				content: '';
				position: absolute;
				margin: auto;
				width: 1rem;
				height: 2px;
				background: #fff;

			}

			&:before {
				transform: rotate(45deg);
			}

			&:after {
				transform: rotate(-45deg);
			}
		}
	}
}

.content {
	padding: 4rem 1rem;
	max-width: 900px;
	
	span {
		display: block;
		width: 100%;
		text-align: center;
		color: rgba(0,0,0,.4);
	}
}

h1,h2,h3,h4,h5,h6 {
	color: rgba(0,0,0,.87);
	margin: 3em 0 1em;
}

p {
	line-height: 1.6;
	font-size: 1.25rem;
	color: rgba(0,0,0,.78);
	
	+ p {
		margin-top: 2rem;
	}
}