Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Nov 13, 2019
Embed
What would you like to do?
popout video
<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>
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`;
});
});
* {
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment