Description overlay on YouTube sequel player

**chechu** · 08-10-2017, 10:09 AM

Hey all,
As header for my website I'm displaying a sequel of YouTube videos with the following code:

Code:

<script src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
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: {
            'onReady': onPlayerReady
        }
    });

}

function onPlayerReady(event) {
    event.target();
    $('#text').fadeIn(400);
}

$(window).scroll(function() {
   var hT = $('.m-video').height(),
       wS = $(this).scrollTop();
   if (wS > hT) {
      player.pauseVideo();
   }
   else {
      player.playVideo();
   }
});
</script>

<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">					
					<span><a href="#overview" class="download-link hidden-xs"><div class="bounce"><i class="bouncefa fa-angle-down"></i></div></a></span>
				</div>
			</div>
		</div>
	</div>
</div>

I would like to add an explanation at the bottom of the screen (so responsive), shown as overlay on the video, that changes with every displayed video. So every video has its own description.
This is the site: www.brunomazereel.com
Is that possible?

**chechu** · 09-01-2017, 09:13 AM

Anyone, please?

**molendijk** · 09-04-2017, 12:46 PM

This may be helpful.

**chechu** · 09-06-2017, 07:40 AM

Thanks for that, Molendijk, but as these videos are not on my channel, I cannot add any description to it.
So it should be something with CSS that is shown above it.

**molendijk** · 09-06-2017, 09:58 PM

I see the problem.
I tried to get it working using the code you alread have, but that turned out to be problematic. Try the following code instead. It works for me.

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 With 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>

<style>
body {margin:0}
</style>

</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">Meisje moet plassen</div>

<div style="position: relative;	padding-bottom: 56.25%;	height: 0;overflow: hidden;">
<iframe id="player" style="position: absolute; width: 100%; height: 100%" frameborder="0" src="http://www.youtube.com/embed/7Qx32a6Hc8w?playlist=jwB1J8FL76s,nvENEbvSMW4,va4vTwOLlrc,ELFdbTwJkJE,9MKvqVTtzzc,MAtwgOsycc0&html5=1&enablejsapi=1&autoplay=1&rel=0&showinfo=0&modestbranding=1&controls=0&autohide=0&vq=large&wmode=opaque&loop=1" allowfullscreen onload="player=new YT.Player(this ,{events: {'onStateChange':function(e){if(e.data === -1){setTimeout('provide_info()',10)}}}})">
</iframe>
</div>

<div style="padding: 30px">
text<br>text<br>text<br>text<br><br>text<br>text<br>text<br>text<br><br>text<br>text<br>text<br>text
</div>

<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>

<script>
$(window).scroll(function() {
   var hT = $('.m-video').height(),
       wS = $(this).scrollTop();
   if (wS > hT) {
      player.pauseVideo();
   }
   else {
      player.playVideo();
   }
});
</script>

</body>

</html>

EDIT: but see below.

**molendijk** · 09-07-2017, 10:43 AM

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>