유튜브앱에서 영상들을 스크롤하다 보면 화면의 중간에 위치했을 때 영상이 자동으로 재생됩니다.
이를 웹페이지에서 구현하기 위한 방법입니다.
스크롤을 통해 특정 HTML Element가 화면의 중간에 위치하면 이를 감지하는 방법입니다.
$(window).on('scroll', function() {
var scrollTop = window.innerHeight / 2;
var eleTop = $('#myElement')[0].getBoundingClientRect().top;
if(eleTop < scrollTop) {
// 화면 중간에 위치 되었음!
}
});아래는 유튜브 iframe API를 이용해서 영상이 화면의 중간에 위치하면 자동으로 영상을 Play 하는 풀 코드 입니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var youTubePlayerObject;
function onYouTubeIframeAPIReady() {
youTubePlayerObject = new YT.Player('youTubePlayerDiv', {
width: '640',
height: '480',
playerVars: {rel: 0},
videoId: 'kabyoDokrkw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) { }
}
function onPlayerReady(event) {
event.target.stopVideo();
}
$(document).ready(function () {
$(window).on('scroll', function() {
var scrollTop = window.innerHeight / 2;
var videoTop = $('#youTubePlayerDiv')[0].getBoundingClientRect().top;
if(videoTop < scrollTop) {
youTubePlayerObject.playVideo(); //재생
}
});
});
</script>
<h1>
AiRPAGE<br/>
AiRPAGE<br/>
AiRPAGE<br/>
AiRPAGE<br/>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
<div id="youTubePlayerDiv"></div>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
AiRPAGE<br>
</h1>
</body>
</html>
건투를 빕니다!
