Christophe, si tu passes par là…il est un peu pour toi celui-là…

Nous allons voir aujourd’hui comment ajouter un cadre personnalisé à vos vidéos…sans plugin bien entendu.

Et par la même occasion, réviser la technique du roulage des Californias Rolls la plus simple et la plus rapide à mon avis

Allez au boulot !

Faites comme d’hab, importez votre vidéo dans un nouvel article…

Repérez ensuite les dimensions de cette vidéo pour réaliser son habillage…dans cet exemple la vidéo fait 405 x 314 px je vais donc créer un cadre légèrement plus grand…logique.

Le voici :

Il fait 435 x 340 je l’ai fait un peu au pif, puisqu’ensuite nous allons centrer la vidéo sur ce cadre via la feuille de style.

Voici donc le bloc que vous devez ajouter dans votre feuille de style :

.vidéo {
background: url("http://www.Adressedevotrecadre.jpg") no-repeat;
width: 435px;
height: 340px;
text-align: center;
padding: 15px 0px 0px 0px;
margin: 0 auto;
}

Une fois que vous avez créer avec Photofiltre votre fond ou bien récupéré n’importe quelle image, vous devez l’héberger pour en récupérer l’adresse, puis la coller dans le bloc de code ci-dessus (en bleu).

Il restera ensuite à faire quelques petits réglages pour centrer votre vidéo sur le fond de votre cadre en jouant avec la ligne : padding: 15px 0px 0px 0px;

Mais pour que cela soit possible il faut ajouter au script de la vidéo (dans votre message en mode html) une balise qui rendra tout ça possible, voici le script de notre vidéo avant modification :

<object width="405" height="314" data="http://www.youtube.com/v/qndZKzNHpwc&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/qndZKzNHpwc&amp;hl=en&amp;fs=1" /></object>

Nous allons ajouter cette balise :

<p class=”vidéo”> au début du script et la balise </p> à la fin pour refermer le tout.

Ce qui donnera ceci :

<object width="405" height="314" data="http://www.youtube.com/v/qndZKzNHpwc&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/qndZKzNHpwc&amp;hl=en&amp;fs=1" /></object>

Voyez c’est tout bête…la balise <p class=”vidéo”></p> permet d’appeler le cadre qui se trouve dans la feuille de style.

Désormais à chaque fois que vous voudrez insérer une vidéo dans un message vous n’aurez qu’à ajouter la balise au script de votre vidéo pour faire apparaitre son cadre.

Rien ne vous empêche de créer plusieurs cadres, il suffit d’ajouter un nouveau bloc dans votre feuille de style comme ceci :

.vidéo2 {
background: url("http://www.Adressedevotrecadre.jpg") no-repeat;
width: 435px;
height: 340px;
text-align: center;
padding: 15px 0px 0px 0px;
margin: 0 auto;
}

Et d’ajouter aussi le 2 à la balise comme ceci : <p class=”vidéo2“></p>