Hi Chechu,
I managed to make it work using a modified version of your own code. The overlay is a div having id="info". The text inside the div is provided by a function provide_info(). It uses player.getVideoUrl().
Code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube Overlay</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<script>
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars:
{
'autoplay': 1, 'controls': 0, 'autohide': 1, 'wmode': 'opaque', 'showinfo': 0, 'loop': 1, 'rel': 0,
'playlist': 'jwB1J8FL76s,nvENEbvSMW4,va4vTwOLlrc,ELFdbTwJkJE,9MKvqVTtzzc,MAtwgOsycc0'
},
videoId: '7Qx32a6Hc8w',
events: {
'onStateChange': function (event){setTimeout('provide_info()',10)}
}
});
}
$(window).scroll(function() {
var hT = $('.m-video').height(),
wS = $(this).scrollTop();
if (wS > hT) {
player.pauseVideo();
}
else {player.playVideo();}
});
</script>
</head>
<body>
<div id="info" style="position: absolute; left:0; top:0; width: 100%; margin: auto; background: gray; color: white; z-index: 10; text-align: center; opacity: 0.9; padding-top: 10px;padding-bottom: 10px; font-family: arial; font-size: 1.5em"></div>
<div class="headersection" id="home">
<div class="container-fluid">
<div class="row">
<div style="max-width:100%;margin:0 auto;">
<div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
<div id="player" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 100%; max-height: 100%;"></div>
</div>
</div>
<div class="cover">
<div class="hi">
<div><a href="#overview" class="download-link hidden-xs"><div class="bounce"><i class="bouncefa fa-angle-down"></i></div></a></div>
</div>
</div>
</div>
</div>
</div>
<br>text<br>text<br>text<br>text<br>
<script>
function provide_info()
{
if(player.getVideoUrl()=='https://www.youtube.com/watch?v=7Qx32a6Hc8w'){document.getElementById('info').innerHTML='Meisje moet plassen'}
if(player.getVideoUrl()=='https://www.youtube.com/watch?v=jwB1J8FL76s'){document.getElementById('info').innerHTML='Naar Limburg met de familie'}
if(player.getVideoUrl()=='https://www.youtube.com/watch?v=nvENEbvSMW4'){document.getElementById('info').innerHTML='Onze verzekeringen groeien met u mee?<br>Had je gedacht!'}
if(player.getVideoUrl()=='https://www.youtube.com/watch?v=va4vTwOLlrc'){document.getElementById('info').innerHTML='Ça tombe bien'}
if(player.getVideoUrl()=='https://www.youtube.com/watch?v=ELFdbTwJkJE'){document.getElementById('info').innerHTML='Hatsjie!'}
if(player.getVideoUrl()=='https://www.youtube.com/watch?v=9MKvqVTtzzc'){document.getElementById('info').innerHTML='Altijd welkom in Limburg'}
if(player.getVideoUrl()=='https://www.youtube.com/watch?v=MAtwgOsycc0'){document.getElementById('info').innerHTML='Spaans koppel koopt auto'}
}
</script>
</body>
</html>
Bookmarks