Suite à une question de Max concernant l'intégration de vidéos

21/09/2012 15:46

Si l'on désire adapter au mieux nos vidéos dans un article Overblog, il est préférable de passer par la création d'une nouvelle section HTML en mode Publication dans l'administration de votre Overblog.

Pourquoi ?

Car nous pouvons régler à ce niveau la position de la vidéo dans l'article et sa taille.

Un exemple avec Youtube

Vous avez sélectionné un clip à publier dans votre post, tout d'abord dans Youtube, sélectionnez Partager/Intégrer afin de récupérer le code HTML correspondant qui devra être du type :

    <iframe width="420" height="315" src="http://www.youtube.com/embed/dmKeIlJq4gM?rel=0" frameborder="0" allowfullscreen></iframe>

Si nous prenons de base le fragment de code HTML proposé par Youtube, nous avons ce résultat sur ce blog:

Si nous désirons maintenant centrer et adapter à la largeur de notre contenu ce même clip vidéo, une petite modification s'impose dans la section HTML du post qui va recevoir cette vidéo :

<center><iframe width="100%" height="400" src="http://www.youtube.com/embed/dmKeIlJq4gM?rel=0" frameborder="0" allowfullscreen></iframe></center>

Ce qui nous donne maintenant :

Vous pouvez à loisir remplacer le paramètre : WIDTH="100%"
par la taille souhaitée en pixels.

Et si je voulais maintenant afficher ma vidéo en 200 pixels de large et 200 pixels de haut centrée dans la zone de contenu de mon post je passerais ce code HTML dans une section HTML de la publication.

    <center><iframe width="200" height="200" src="http://www.youtube.com/embed/dmKeIlJq4gM?rel=0" frameborder="0" allowfullscreen></iframe></center>

Ce qui aurait pour résultat un clip réduit comme ci-dessous :

Et maintenant 4 clips en miniatures, le code à intégrer dans une section HTML de votre publication (taille 200x200 px par clip, selon le thème vous pouvez agrandir ou réduire la surface carrée en changeant le width et le height dans le fragment de code HTML)

<center>
<iframe width="200" height="200" src="http://www.youtube.com/embed/dmKeIlJq4gM?rel=0" frameborder="0" allowfullscreen style="display:block;float:left;margin:8px;"></iframe>
<iframe width="200" height="200" src="http://www.youtube.com/embed/OLDSdnHWaSU?rel=0" frameborder="0" allowfullscreen style="display:block;float:left;margin:8px;"></iframe>
<iframe width="200" height="200" src="http://www.youtube.com/embed/WR3WzL-wlC0?rel=0" frameborder="0" allowfullscreen style="display:block;float:left;margin:8px;"></iframe>
<iframe width="200" height="200" src="http://www.youtube.com/embed/BG2b3VhSCC4?rel=0" frameborder="0" allowfullscreen style="display:block;float:left;margin:8px;"></iframe>
</center>

Le résultat :

Vous pouvez aussi intégrer des vidéos dans une "sidebar" pour qu'elles soient visibles sur toutes les pages de votre site de la même manière...