I'm attempting to have a YouTube video auto-play when the user scrolls to it and stops when the user scrolls past it. This works fine thanks to this post "JQuery Autoplaying Youtube videos on scroll". Now I want to also do this with window.scroll but it fails. It seems to me that the div containing updated iframe tag is not loaded with youtube APIIframe ready. any one know why. Really appreciate your help?.
Below are my codes
<style type="text/css">
iframe {
width: 200px;
height: 200px;
margin: 10px 10px 100px 10px;
}
</style>
<div id="wrap" class="content" style="border:groove">
<iframe style="margin-top:200px" id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/>
<iframe id="playerB" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/>
<iframe style="margin-bottom:200px" id="playerC" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
<div style="height:800px"></div>
</div>
<script type='text/javascript'>//<![CDATA[
function my_first(){
var LoadVideo = function(player_id){
var Program = {
Init: function(){
this.NewPlayer();
this.EventHandler();
},
NewPlayer: function(){
var _this = this;
this.Player = new YT.Player(player_id,{});
_this.Player.$element = $('#' + player_id);
},
Play: function(){
if( this.Player.getPlayerState() === 1 ) return;
this.Player.playVideo();
},
Pause: function(){
if( this.Player.getPlayerState() === 2 ) return;
this.Player.pauseVideo();
},
ScrollControl: function(){
//alert('player='+player_id);
//alert('total='+Utils.IsElementInViewport(this.Player.$element[0]) );
if( Utils.IsElementInViewport(this.Player.$element[0]) ) this.Play();
else this.Pause();
},
EventHandler: function(){
var _this = this;
$(window).on('scroll', function(){//alert(player_id)
_this.ScrollControl();
});
}
};
var Utils = {
IsElementInViewport: function(el){
if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
return (
rect.top >= 100 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.bottom <= 400 &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
};
return Program.Init();
};
$('iframe').each(function(){
LoadVideo($(this).attr('id'));
});
}
function yHandler(){
var wrap=document.getElementById('wrap') ;
var contentHeight = wrap.offsetHeight;//get page content height
var yOffset = window.pageYOffset;//get vertical scroll position
var y = yOffset+ window.innerHeight;
if(y >= contentHeight) {//alert(1234)
wrap.innerHTML += '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>';
}
}
window.onscroll = function () {
$.getScript('//www.youtube.com/player_api');
yHandler();
my_first();
}
