Sticky Floating Video

Membuat efek video mengambang

by Miftah Faroq

HTML

<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="content-main-box">
		<div id="videobox">
			<!-- <video width="400" controls="">
				<source src="assets/rossi.mp4" type="video/mp4">
				Your browser doesn't support
			</video> -->
			
			<iframe width="400" height="315" src="https://www.youtube.com/embed/vr0qNXmkUJ8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

		</div>

		<div class="content-box">
			<h1>Efek<span>"sticky"</span>Floating <span>video</span> saat <span>scroll</span></h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas...

CSS

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

.content-main-box{
	width: 90%;
	height: auto;
	margin: auto;
	max-width: 1200px;
}

#videobox{
	width: 50%;
	height: auto;
	margin: auto;
	border: 10px solid #000;
	transition: 0.5s;
}

iframe, video{
	width: 100%;
	vertical-align: bottom;
}

.content-box{
	width: 100%;
	height: auto;
	margin: auto;
	display: block;
	position: static;
	overflow: hidden;
}

.content-box h1{
	font-family: arial;
	font-size: 30px;
	text-align: center;
	color: #f7403c;
	padding-top: 20px;
	text-transform: uppercase;
}

.content-box h1 span{
	color: #fe9b1a;
}

.content-box p{
	font-family: arial;
	font-size: 18px;
	text-align: justify;
	color: #333333;
	line-height: 26px;
	padding-top: 20px;
}

#videobox.in{
	animation: ac 1s;
}

#videobox.out{
	position: fixed;
	bottom: 0;
	right: 0;
	width: 300px;
	z-index: 999;
	animation: an 0.5s;
}

JavaScript

var ha=($('#videobox').offset().top + $('#videobox').height());

		$(window).scroll(function(){
			if($(window).scrollTop() > ha + 500) {
				$('#videobox').css('bottom','0');
			} else if($(window).scrollTop() < ha + 200) {
				$('#videobox').removeClass('out').addClass('in');
			} else {
				$('#videobox').removeClass('in').addClass('out');
				$('#videobox').css('bottom','-500px')
			}
		});