Comment insérer une vidéo miniature sur votre site ?

Vous voulez insérer une vidéo miniature qui marche, du genre vignette fonctionnelle ou thumbnail interactif, et vous voulez l'intégrer dans un espace très réduit, dans la marge par exemple ? 

Je fais cette rubrique pour aider ceux qui vont chercher sans fin, comme je l'ai fait, dans des forums bidons ou des liens dangereux et virulents. On tourne en rond, on ne comprend rien, et retour à la case départ du style énervé.

Alors, prenons l'exemple de cette vidéo Youtube magnifique :

Vous l'avez dans le format 660 x 525.

Pour ceux qui veulent intégrer une vidéo Youtube sur leur site, vous lisez la vidéo concernée sur Youtube, puis vous cliquez en haut à droite sur "Intégrer la vidéo sur un site", vous sélectionnez ensuite la couleur, le format, le cadre (à cocher dans la case correspondante), et vous copiez-collez le code HTML proposé dans la rubrique ou l'emplacement choisis de votre blog ou de votre site.

Pour la vidéo ci-dessus, on obtiendra :

<object width="660" height="525"><param name="movie" value="http://www.youtube.com/v/amCsB1p4OQI&hl=fr_FR&fs=1&color1=0x5d1719&color2=0xcd311b&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/amCsB1p4OQI&hl=fr_FR&fs=1&color1=0x5d1719&color2=0xcd311b&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="525"></embed></object>

Il y a plusieurs formats proposés, par exemple le 500 x 405 :

ou le 445 x 364 :

ou le 340 x 285 :

Revenons à nos moutons, vous voulez une vidéo miniature. Prenons l'exemple de cette dernière vidéo, vous obtenez le code :

<object width="340" height="285"><param name="movie" value="http://www.youtube.com/v/amCsB1p4OQI&hl=fr_FR&fs=1&color1=0x234900&color2=0x4e9e00&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/amCsB1p4OQI&hl=fr_FR&fs=1&color1=0x234900&color2=0x4e9e00&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="340" height="285"></embed></object>

Alors, c'est très simple, regardez les chiffres. Vous apercevez deux fois le 340 et deux fois le 285. Il vous suffit de modifier (sur word par exemple, pour faire votre brouillon) ces chiffres en les diminuant.

Je vous propose d'essayer de remplacer le 340 par 170 et le 285 par 142 (à peu près la moitié). N'oubliez pas de les modifier deux fois puisqu'ils se répètent au début et à la fin du code HTML. Je vous propose donc :

<object width="170" height="142"><param name="movie" value="http://www.youtube.com/v/amCsB1p4OQI&hl=fr_FR&fs=1&color1=0x234900&color2=0x4e9e00&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/amCsB1p4OQI&hl=fr_FR&fs=1&color1=0x234900&color2=0x4e9e00&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="170" height="142"></embed></object>

Et voilà !

Pour Dailymotion ou autres, c'est le même film. Exemple, cette vidéo que vous trouvez à l'adresse : 

http://www.dailymotion.com/video/x8kize_prière-à-sainte-rita-de-cascia_news

Si vous voulez obtenir le code HTML pour l'intégrer sur votre site, regardez en bas ou il est écrit "Lecteur exportable". Vous cliquez et copiez-collez ce code, ce qui vous donne ça :

<object width="480" height="365"><param name="movie" value="http://www.dailymotion.com/swf/x8kize"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.dailymotion.com/swf/x8kize" width="480" height="365" allowfullscreen="true" allowscriptaccess="always"></embed></object><br /><b><a href="http://www.dailymotion.com/video/x8kize_prière-à-sainte-rita-de-cascia_news">Pri&egrave;re &agrave; Sainte-Rita de Cascia</a></b><br /><i>envoy&eacute; par <a href="http://www.dailymotion.com/Parousie738">Parousie738</a>. - <a href="http://www.dailymotion.com/fr/channel/news">L'info video en direct.</a></i> 

Prière à Sainte-Rita de Cascia
envoyé par Parousie738. - L'info video en direct.

Encore une fois, vous pouvez noter les nombres correspondant au format du cadre de la vidéo proposée.

Puis, pour la réduire à une miniature, faites comme pour l'exemple Youtube ci-dessus. Exemple : je remplace 480 par 150 et 365 par 100, et ça donne :

<object width="150" height="100"><param name="movie" value="http://www.dailymotion.com/swf/x8kize"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.dailymotion.com/swf/x8kize" width="150" height="100" allowfullscreen="true" allowscriptaccess="always"></embed></object><br /><b><a href="http://www.dailymotion.com/video/x8kize_prière-à-sainte-rita-de-cascia_news">Pri&egrave;re &agrave; Sainte-Rita de Cascia</a></b><br /><i>envoy&eacute; par <a href="http://www.dailymotion.com/Parousie738">Parousie738</a>. - <a href="http://www.dailymotion.com/fr/channel/news">L'info video en direct.</a></i>

Et voilà !

Prière à Sainte-Rita de Cascia
envoyé par Parousie738. - L'info video en direct.

P.S. : Le libellé qui s'affiche automatiquement dessous, vous pouvez l'effacer.

Bonne route et n'hésitez pas à laisser vos commentaires et à partager votre savoir.

Patrick, l'auteur du site.