Affichage des articles dont le libellé est videobox. Afficher tous les articles
Affichage des articles dont le libellé est videobox. Afficher tous les articles

29 juil. 2010

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