Mettre en ligne une vidéo dans une vidéoBox

Encore un joli effet de lightbox et ce n'est pas très difficile à réaliser.
Attendez que la page et tous les fichiers se chargent et faîtes le test :




Cliquez pour voir la vidéo

Si votre blog est sur OverBlog, vous pouvez utiliser les adresses de mes fichiers. Vous devez seulement changer l'adresse de votre vidéo

Première étape :

Allez sur VidéoBox

Cliquez sur Download VideoBox 1.1

Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire vers.

Deuxième étape :

Dans l'administration de votre blog - Mes documents - Autres Fichiers :

• vous créez un répertoire videobox
  
  
  • dans ce répertoire, vous enregistrez les fichiers
    
    
    • closelabel.gif
      
    • loading.gif
      
  • vous notez leur adresse
    

Troisième étape :

Sur votre PC :

• vous ouvrez le bloc-note
  
• vous appelez le fichier videobox.css
  
• vous modifiez les chemins des images en les remplaçant par les nouvelles adresses (2ème étape)
  
• vous enregistrez le fichier sous le même nom
  

Quatrième étape :

Dans votre administration - Mes documents - autres fichiers - videobox :

• vous enregistrez les fichiers suivants :
  
  
  • flvplayer.swf
    
  • swfobject.js
    
  • videbox.css
    
  • videobox.js
    
• vous notez leur adresse
  

Cinquième étape :

Lors de l'installation de la vidéo, vous collez en HTML

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/mootools.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/swfobject.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/videobox.js"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/videobox/videobox.css" type="text/css" media="screen" />
<a href="http://www.youtube.com/watch?v=uhi5x7V3WXE" rel="vidbox" title="caption">Cliquez pour voir la vidéo</a>

En rouge, les fichiers enregistrés à l'étape 4
En bleu, l'adresse de la vidéo . On trouve cette adresse sur YouTube dans la barre de menu du navigateur