Slick Videos Presentation With Fancybox

Implémentation

Ce que l'on veut obtenir

Comme il est possible de voir dans la démonstration, le résultat voulu sera composé de plusieurs éléments. Nous voulons afficher une image de la vidéo dans un lien. Cette petite illustration est la seule chose qui sera visible par l'utilisateur au début. Quand l'utilisateur cliquera sur l'image, une fancybox s'ouvrira pour révéler la vidéo qui se lancera automatiquement. La taille de la fancybox et celle de la vidéo seront similaire pour un meilleur effet.

Le code Html

Maintenant que l'on une meilleure idée du comportement désiré, ajoutons le code du lien, de l'illustration, et de la vidéo:

<!-- The Video Thumbnail -->
<a id="videolink" href="#videocontainer" title="videotest">
  <img src="/Images/resources/videotest.jpg" />
</a>
 
<!-- The Video Object -->
<div id="videocontainer">
 <object width="480" height="295">
  <param name="movie" 
    value="http://www.youtube.com/v/SC-2VGBHFQI&hl&autoplay=1">
  </param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed 
    src="http://www.youtube.com/v/SC-2VGBHFQI&autoplay=1" 
    type="application/x-shockwave-flash" 
    allowscriptaccess="always" allowfullscreen="true" width="480" height="295">
  </embed>
 </object>
</div>

Dans le code précédent, nous pouvons voir qu'un lien a été crée avec un id #vidéolink. Il est à noter que l'attribut href du lien contient l'id du div #vidéocontainer (qui contient la vidéo). C'est grâce à cet id que la fancybox pourra charger la vidéo dès son ouverture.

Sachant que la fancybox affiche de manière élégante le contenu de l'attribut titre du lien, on y ajoute le titre de la vidéo.

En bref, l'élément le plus important de cette première partie est le lien, qui possède un id et cible le div qui contient la vidéo. Vous pouvez en fait ajouter ce que vous voulez dans le lien, moi j'aime bien utiliser des illustrations pour donner à l'utilisateur un aperçu du contenu de la vidéo.

Dans la seconde partie, on crée un div, dont l'id est donc égal à la cible du précédent lien, et qui contient le code de la vidéo, (j'ai copié le mien à partir d'une page YouTube). La seule chose remarquable ici est le fait que l'on ajoute '&autoplay=1' après l'url de la vidéo, afin que celle ci se lance toute seule dès l'ouverture de la fancybox.

Passons maintenant au code JavaScript correspondant

Le code jQuery

Tout d'abord, il faut inclure jQuery, le plugin et sa feuille de style:

/** jQuery Inclusion **/
<script type="text/javascript" src="Chemin_vers/jQuery.js"></script>
/** Plugin Inclusion **/
<script type="text/javascript" src="Chemin_vers/jquery-fancybox.js"></script>
/** Style requis **/
<link href="Chemin_vers/fancybox.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("a#videolink").fancybox({
      frameWidth: 480, 
      frameHeight: 295,
      overlayShow: true,
      overlayOpacity: 0.7
    });
});
</script>

Juste une petite note sur les options utilisées dans cet exemple, frameWidth et frameHeight doivent être égales à la largeur et hauteur de la vidéo. Les 2 options suivantes ajoutent une teinte grisée d'une opacité de 50% à votre écran quand la vidéo se lance.

Conclusion

Etant donné que la fancybox est un plugin puissant, il est possible de bénéficier de ses fonctionnalitées sans efforts. Quand on l'associe à des vidéos, le résultat final est très esthétique. Cette façon de lire des vidéos peut se montrer particulièrement efficace dans des portfolios ou des pages multimédia. Pour étendre la lecture de cet article je vous propose un autre tutoriel écrit par Alen Grakalic de css globe, sorti la même semaine, sur une approche un peu différente du même problème.

Partager:

Vous seriez peut être aussi intéressé par::

Commentaires récents

I am trying to use this bit of code on my company site and it works great on Firefox, but I am only getting audio on Safari (no video shows up). To make the video play on Safari, how should the code be altered?

De Brian à 22:19 29/01/11 { Répondre }

You forgot the <div display="none"> before the <div id="videocontainer">. Thats why for some users the video keep showing even before you click at the image.

De Matheus à 21:51 17/01/11 { Répondre }

Not bad but I prefer Zoombox plugin who is more easy to configure than Fancibox.
And here the cross is not in a good position.

Pas mal mais je préfère Zoombox sur le point de vue de la configuration (plus facile à mon gout).
Pour ce dernier, la croix est mal placée.

Bye

De 2tension à 18:06 24/08/10 { Répondre }

thanks for this, to get it to work properly in Safari I needed to add (maybe usefull for somebody else using it)

hideOnContentClick:false

But thanks a lot you saved me hours of work!

De salty à 20:49 09/07/10 { Répondre }

I am trying to put this on my site, and the video was appearing in the div until I used the display:none property, however now, when you click on the image, the pop us has nothing it - i've been over the CSS on this site and the code, and can't seem to figure out what I'm doing wrong. any thoughts?
http://www.ilovestudiothree.com/beta/press

De Rob à 04:47 22/06/10 { Répondre }

Thank you SO much for this tutorial. It was exactly what I was looking for help display the sidebar videos in a lightbox on http://www.alistmagazine.com. You're awesome for sharing and explaining the code tweaks!

De Grace à 21:37 02/06/10 { Répondre }

With version 131 it is possible to add youtube trailers in by default. Check: http://fancybox.net/blog #4 for more info

Cheers!

De xfinx à 08:05 11/05/10 { Répondre }

@jdmweb. Hi Jeremy! Thanks a bunch for your reply. I tried the display:none property. I've managed to fix it. But the problem was in the header, where I included the css and fancybox in a wrong way. Although I must have the display property in a new div which has a div in it (containing the object) :) But it works just fine now. Thanks a bunch again! :) Have a great day!

De tippi à 08:44 28/04/10 { Répondre }

@tippi.
Hey Tippi, thanks for your comment.
Regarding your issue, I'm not sure I quite understand, can you send me a link so I can have a look?
If your problem is that the player is not hidden by default, have you tried to add the display:none property to it in your css? I use a class and some basic CSS properties to hide the player, which is then revealed within the fancybox.

De jdmweb à 18:34 27/04/10 { Répondre }

Hello!
This was really nice. I searched around and could not get it to work. But with your help i fixed it! Thank you! I have one question though. I did it with links instead of images. But for some reason the clip shows up on my page in a box and is playable. I only want the link to fire up fancybox (which it does). How do I get rid of the clip in the box? It seems like it displays the content of the div. Which is the object. Any ideas or tips to give me? I would appreciate it. Good work!

De tippi à 10:48 27/04/10 { Répondre }