How do you make a div show when vimeo video is finished?

Question

I'm really new to JS, and can't figure out these event listeners on Vimeo. Basically I need a div, below the video, to be hidden while the video plays, and appear when the video finishes. Please help, as I have no idea where to start. I've tried everything.

This is what I have so far, but no luck:

<div style="margin-left:2%;" >  
        <iframe id="flash" src="http://player.vimeo.com/video/50234176?api=1&amp&portrait=0&byline=0&autoplay=1&title=0;player_id=player_1" width="760" height="460" frameborder="0"></iframe>
</div>
<div id="hello" >hello</div>
<script>
$('#hello').hide();

var iframe = $('#player1')[0],
    player = $f(iframe),

player.addEvent('ready', function() {
  player.addEvent('finish', function(){
    $('#hello').show();
  });
});
</script>

Answer 1

Initially, your div can be hidden by using a simple CSS display:none , or calling $('#yourDivID').hide();

So, to show your div again when the video is finished, try this way:

player.addEvent('ready', function() {
  player.addEvent('finish', function(){
    $('#yourDivID').show();
  });
});