※デベロッパーツール等でソースコードをご確認ください(Please check using Developer tools)
動画を再生中にスクロールして画面から見えなくすると一時停止します。
(in-view.min.jsを使用)
.wrap {
width: 600px;
margin: 600px auto;
}
.text {
line-height: 1.5;
margin: 50px 0 0;
text-align: center;
}
.movie {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width:640px){
.wrap {
width: 100%;
}
}
inView('.movie')
.on('enter', el => {
el.classList.remove("stop")
})
.on('exit', el => {
el.classList.add("stop")
});
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player("player",{});
}
$(window).on('scroll',function(){
if($(".movie").hasClass('stop')){
player.pauseVideo();
}
});