Results 1 to 7 of 7

Thread: Description overlay on YouTube sequel player

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    864
    Thanks
    107
    Thanked 2 Times in 2 Posts

    Default Description overlay on YouTube sequel player

    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?

  2. #2
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    864
    Thanks
    107
    Thanked 2 Times in 2 Posts

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

  4. The Following User Says Thank You to molendijk For This Useful Post:

    chechu (09-06-2017)

  5. #4
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    864
    Thanks
    107
    Thanked 2 Times in 2 Posts

    Default

    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.

  6. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    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.
    Last edited by molendijk; 09-07-2017 at 10:49 AM.

  7. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    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>
    Last edited by molendijk; 09-07-2017 at 02:32 PM.

  8. The Following User Says Thank You to molendijk For This Useful Post:

    chechu (09-11-2017)

  9. #7
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    864
    Thanks
    107
    Thanked 2 Times in 2 Posts

Similar Threads

  1. Youtube video player suggestions?
    By igotregistered in forum Other
    Replies: 18
    Last Post: 09-06-2013, 08:52 PM
  2. Controlling the youtube player with javascript
    By molendijk in forum Looking for such a script or service
    Replies: 2
    Last Post: 10-15-2012, 09:24 AM
  3. A player for YouTube, Tubehop, DailyMotion and GoogleVideo.
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 0
    Last Post: 01-31-2010, 11:32 PM
  4. Replies: 5
    Last Post: 03-16-2007, 03:24 PM
  5. Replies: 14
    Last Post: 01-31-2007, 10:46 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •