Insérer une « video bar » Youtube dans un site web
Ce matin, j’ai cherché une solution pour insérer une série de vidéos sur un site développé sous Dotclear. Il existe de nombreuses solutions de gestion de vidéos pour Wordpress, mais peu (ou pas) de solutions pour Dotclear. Et le player présent en natif sur Dotclear n’est pas de très bonne qualité… Jusqu’ici, j’utilisais Idesktop.tv. Ce module est plutôt bien fichu, mais passer par un service externe ne me convenait pas. J’ai donc cherché une solution dans le Google Labs qui pourrait me convenir. Youtube/Google mettent à disposition plusieurs outils, dont le « Video bar wizard ».
NB : je n’utilise quasiment plus Dotclear, je n’ai donc pas mis à jour cette solution depuis sa publication, et les scripts de Youtube ont changé depuis. Cette soluce est donc très probablement obsolète. je la laisse néanmoins ici pour information.
1/ Récupération du code
Pour insérer une barre de vidéos sur votre site, rendez-vous à cette adresse. Plusieurs options s’offrent à vous : orientation, choix de la chaine Youtube à afficher ou tri par mots-clefs.
Attention : si vous souhaitez n’afficher qu’une seule ligne horizontale de vidéos, choisissez l’orientation « horizontale ». Si vous souhaitez afficher 2 lignes horizontales, choisissez « verticale ».
Le code généré ressemble à celui-ci :
Loading...
2/ Customisation
La code généré fait appel à des fichiers javascript et CSS hébergés sur les serveurs de google. La première chose à faire est de les récupérer puis de les héberger sur le serveur de votre site web. Ceci vous permettra de modifier l’apparence de la barre vidéo. Vous pouvez les récupérer ici, ici, ici et là.
Ma seconde démarche a été de faire proprement appel à ces fichiers dans mon header, et non pas dans le corps de ma page, comme dans le code généré par défaut. Récupérez le début du code et insérez-le dans l’entête de votre page (dans les balises <head></head>).
- Pour trier les vidéos par date d’upload :
Par défaut, les vidéos ne sont pas affichée par ordre décroissant de date. Pour les trier, chercher la ligne suivante dans le script à insérer sur votre page web :
function LoadVideoBar() {
Et insérer celui-ci juste après :
var bsc = GSvideoBar.prototype.buildSearchControl;
GSvideoBar.prototype.buildSearchControl = function() {
bsc.call(this);
this.vs.setResultOrder(google.search.Search.ORDER_BY_DATE);
this.vsBypass.setResultOrder(google.search.Search.ORDER_BY_DATE);
}
- Pour afficher la vidéo au milieu de votre page :
La soluce précédente crée un petit bug d’affichage : lorsqu’on clique sur une vidéo de la barre, celle-ci s’affiche tout en bas de votre page. Un peu de CSS suffit pour corriger cela. Dans le fichier gsvideobar.css, chercher les lignes suivantes :
.playing_gsvb {
display : block; }
Et les remplacer par celui qui suit. Vous pouvez jouer avec les valeurs de top et left pour afficher la vidéo à l’endroit souhaité.
.playing_gsvb {
display : block;
position:absolute;
top:85%;
left:30%; }
- Pour supprimer le logo Youtube :
Dans le fichier videobar.js, cherchez la ligne suivante :
// now add in the branding...Puis supprimez le code qui se trouve en-dessous :
// now add in the branding...
row = this.createTableRow(table);
var brandingOrientation;
if (this.verticalMode) {
cell = this.createTableCell(row, this.CL_RESULTCELL);
brandingOrientation = GSearch.VERTICAL_BRANDING;
} else {
cell = this.createTableCell(row, this.CL_RESULTCELL);
if (this.br_IsIE()) {
cell.setAttribute("colSpan", results.length);
} else {
cell.setAttribute("colspan", results.length);
}
brandingOrientation = GSearch.HORIZONTAL_BRANDING;
}
GSearch.getBranding(cell, brandingOrientation, "http://www.youtube.com");
this.brandingCell = cell;
- Pour afficher les vidéos en 2 lignes horizontales :
Dans le fichier gsvideobar.css, chercher les lignes suivantes :
table.resultTable_gsvb {
border-collapse : collapse;
}
En dessous, ajouter :
table.resultTable_gsvb tr {
display:inline-block;
}
Vous n’avez plus qu’à jouer avec la largeur de votre conteneur pour afficher 2 lignes ou plus ! Attention : cette soluce ne fonctionne pas pour Internet Explorer, je n’ai pas encore pris le temps de résoudre le bug. Si quelqu’un a une idée, il peut la partager dans les commentaires ;)
3/ Le résultat
Bonsoir Mylène,
Je serai curieux de voir le résultat en place sur Dotclear. Est-ce possible d’avoir un exemple précis ?
Je pense que ta solution pourrait répondre à une des problématiques d’obtenir un lecteur de vidéo Youtube personnalisé.
Merci de ta réponse.
Bonjour,
Le résultat est visible ici : http://www.animasia.org (bas de la page). Oui je pense qu’on peut aller plus loin pour personnaliser ce lecteur, je n’avais pas la nécessité de le faire, mais en modifiant le javascript, tout doit être possible !
Bonjour Mylène,
Je reviens vers vous car lorsque je modifie le fichier javascript, je ne peu plus visionner les vidéos. Autre chose avez vous trouvez une solution pour IE.
Je vous remercie par avance,
Dans cette attente ,
Cathy
Bonjour Cathy,
Merci de votre commentaire. Je n’ai pas cherché de solution pour IE car le site sur lequel j’ai implémenté cette solution va très bientôt changer de structure, de CMS et de webmaster… Je n’assure donc plus le support sur celui-ci.
J’ai vérifié, la solution fonctionne toujours sur le site en question. Faites très attention lorsque vous modifiez votre fichier, une suppression d’accolade ou de point virgule peut mettre en l’air votre code, et donc l’affichage des vidéos !
Essayez d’abord de faire fonctionner le script en récupérant simplement le fichier.js. Puis faites une premier modif et vérifiez l’affichage des vidéos, puis une autre, ainsi de suite. Cela vous permettra de voir à quel étape se situe votre problème.