페이지 스크롤에서 고정 플로팅 비디오 만드는 방법

개요

최근 비디오 스트리밍 서비스, 뉴스 웹사이트, 페이스북 등 미디어 웹사이트를 탐색하다보면 비디오 플레이어에 대한 추세를 알 수 있다. 비디오가 있는 페이지를 아래로 스크롤하면 플레이어가 플로팅되고 축소되어 보기에서 사라지지 않고 뷰포트 측면에 고정된다.

이를 통해 사용자는 비디오를 주시하면서 동시에 다른 콘텐츠를 살펴볼 수 있다. 이 듀토리얼에서 동일한 경험을 재현하는 방법을 알아볼려고 한다.

Entertainment Weekly, CNN 사례

YouTube  동영상 추가

페이지에 표시하려는 내용에 따라 위의 HTML을 조정하십시오. .video-wrap및 .videodiv 는 그대로 둡니다 .

<div class="video-wrap">
  <div class="video">
    <iframe width="600" height="340" src="https://www.youtube.com/embed/u2TaNNiJSxI" frameborder="0" gesture="media" allowfullscreen></iframe>
  </div>
</div>

.video-wrap이것은 페이지에서 초기에 정적 상태로 유지되며 스크롤 위치가 div 하단을 넘어/아래로 이동하면 고정됩니다 .

 

 

CSS

@keyframes fade-in-up {
	 0% {
		 opacity: 0;
	}
	 100% {
		 transform: translateY(0);
		 opacity: 1;
	}
}

.video iframe {
	 max-width: 100%;
	 max-height: 100%;
}

.video.stuck {
	 position: fixed;
	 bottom: 20px;
	 right: 20px;
	 width: 260px;
	 height: 145px;
	 transform: translateY(100%);
	 animation: fade-in-up 0.75s ease forwards;
	z-index: 1;
}

필요에 따라 위의 고정 비디오의 너비와 높이를 조정할 수 있습니다.

자바스크립트

(function($) {
	var $window = $(window);
	var $videoWrap = $('.video-wrap');
	var $video = $('.video');
	var videoHeight = $video.outerHeight();

	$window.on('scroll',  function() {
		var windowScrollTop = $window.scrollTop();
		var videoBottom = videoHeight + $videoWrap.offset().top;
		
		if (windowScrollTop > videoBottom) {
			$videoWrap.height(videoHeight);
			$video.addClass('stuck');
		} else {
			$videoWrap.height('auto');
			$video.removeClass('stuck');
		}
	});
}(jQuery));

참고 : 청중과 웹사이트 특성에 따라 속성을 조정해야 함. 예를 들어 웹 사이트 콘텐츠가 오른쪽에서 왼쪽으로 쓰여진 경우 비디오 플레이어 배치할때 위치에 영향을 줄 수 있음.