Vidéos contextuelles Youtube

Une vidéo contextuelle est à la vidéo insérée avec un lecteur classique ce que la publicité contextuelle est à la bannière de publicité figée classique.

En utilisant l'API Youtube on peut illustrer un article en plaçant des vidéos qui seront choisies par Youtube en fonction des mots-clés de la page où la section où l'on place cette vidéo. Cela permet alors de mettre à jour automatiquement une page en fonction de l'actualité...

Pour réaliser ce montage assez simple à vrai dire, on utilisera le Custom Player de l'API Youtube et sa fonction de recherche. Et pour améliorer l'effet, on utilisera aussi le widget videobar qui affiche une vignette aussi facile à intégrer dans le texte qu'une image.

Comment cela fonctionne

Pour arriver à ce résultat, on est parti du widget videobar, fournit avec l'API Youtube.
Le code du fichier gsvideobar.js a été modifié de façon à afficher une seule vidéo à la fois.

Le code propre à la page (voir le code HTML de la démo) est réutilisé en plusieurs occurences si on veut insérer plusieurs vidéos dans la même page.
A chaque fois, il faut choisir des mots-clés propres au texte que l'on veut illustrer. Ces mots-clés seront séparés par un code de soulignement, et assignés à la variable executeList.

Exemple pour Battlestar Galactica:

executeList : [  "battlestar_galactica" ]

Exemple pour Cosmétique:

 executeList : [  "cosmetics" ]

On appelle la fonction propre à chaque vidéo avec la commande setOnLoadCallback de l'API:

GSearch.setOnLoadCallback(LoadVideoBar);
GSearch.setOnLoadCallback(LoadVideoBar1);

Chaque vidéo à son propre identificateur et il doit être donné en paramètre à l'API Youtube:

var barContainer = document.getElementById("battlestar");
var barContainer = document.getElementById("cosmetics");

Pour simplifier la démonstration, on a téléchargé les fichiers JavaScript de Google et les feuilles de style. Mais l'API est en version béta, il conviendra pour une application finale d'utiliser les derniers fichiers fourni sur le site de Google.

Démo

Télécharger le code avec la démo.
Le code source de la démo contient tous les éléments nécessaires pour insérer des vidéos contextuelles dans vos articles.