Comment puis-je faire un DIV visible en haut de l'HTML5 vidéo en plein écran?

Mon but ultime est d'avoir un lien apparaît en haut de la vidéo lorsque la vidéo a atteint la fin. À l'aide de la JW Joueurs fonctionnalité j'ai trouvé comment avoir le lien apparaît lorsque la vidéo est terminée, mais uniquement dans la vue standard. Si l'utilisateur visionne la vidéo en plein écran, le lien ne s'affiche pas. J'ai fait beaucoup de lecture et de comprendre que lorsqu'il est en mode plein écran de la vidéo est en flash et je ne peux pas remplacer les fonctions de flash sans intégrer le lien dans le fichier swf, dont je ne veux pas faire.

Ce que j'ai fait est de supprimer le bouton fullscreen dans le JW Player lecteur vidéo à l'aide de la peau. Puis j'ai créé un bouton pour afficher la vidéo en plein écran en utilisant le HTML5 plein écran de la fonctionnalité. (Je comprends que IE ne fonctionnera pas avec cette...c'est très bien pour l'instant). Je suis aussi capable de créer un plein écran de modification de l'état de l'écouteur d'événement pour que mon lien apparaît sur le dessus de la vidéo. Mais il ne fonctionne pas.

Peu importe comment je le style de la DIV qui détient le lien, il n'apparaît pas sur la vidéo.

Quelqu'un peut me pointer dans la bonne direction?

Merci pour toute aide que quelqu'un peut me donner.

Exemple de Code:

#container{
       position:relative;
   z-index:0;
}

#overlay {
   visibility:hidden; 
   width: 700px; 
   height:50px; 
   color:#FFF; 
   position: absolute; 
   top: 532px; 
   margin:8px; 
   padding:5px; 
   background-color:#000;   
   text-align:center;
}

#overlayfullscreen{
   visibility:hidden;
   text-align:center;
   color:#FFF;
   font-size:26px;
   z-index: 1000;
   position: absolute;          
   top: 800px;
   margin:8px; 
   padding:5px; 
   overlay:hidden;          
}



<div id="container">
    Loading the player, if not working please update your browser.
</div>                      

<button onClick="goFullscreen('container'); return false">Click for Fullscreen</button>





var path = '<?php echo $video_path ?>';

jwplayer("container").setup(
{
autostart: <?php echo $autostart ?>,        
file: "<?php echo $full_video_path ?>",                                 
height: <?php echo $height ?>,
width: <?php echo $width ?>,
skin: '<?php echo $skin ?>',

events: {
    onComplete: function(){
         document.getElementById('overlay').style.visibility = 'visible';                                       
      }                                 
    }                                   
});

document.addEventListener("mozfullscreenchange", function () 
{                                   
document.getElementById('overlayfullscreen').style.visibility = 'visible';              
}, false);

OriginalL'auteur bryankerk | 2013-04-02