Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

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

- Auteur : Brunofaisart

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

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...

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Marion 21/09/2012 15:46

Bon en revanche là vous avez faux :) Les sections sont étudiées pour être totalement optimisées, il est totalement conseillé de les utiliser. La seule fonction, pour resizer les vidéos, est prévue, mais pour plus tard.

La plateforme est encore en développement, certaines options ne sont pas essentielles et donc moins prioritaires, mais sont déjà pensées :)

Bruno admin créateur de ce blog 22/09/2012 07:09

Marion,
Suis d'accord avec toi mais tant que les problèmes d'affichage et de mise en page ne sont pas réglés au niveau de la section Audio et Vidéo, une solution simple d'attente à la portée de tous :)

Alice 19/09/2012 17:06

Merci de ce rappel pour insérer au mieux les vidéos ...
(Yeah ... j'écoute Marley avec plaisir !) ;-)

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...