Comment bien intégrer une vidéo Youtube dans une page Web

Attention: cet article a été écrit avant que Youtube n’implémente le nouveau code d’intégration <iframe> début 2011. Il n’est donc pas à jour. Plus de détails ici.

Comme tous les sites de partage vidéo, Youtube nous propose, pour chaque vidéo, un bout de code HTML prêt à intégrer dans n’importe quelle page Web. Son objectif étant d’être le plus universel possible, il est cependant loin de respecter les normes du World Wide Web Consortium (W3C). Il est heureusement facile de le remplacer par un code plus simple, plus normalisé et mieux adapté à la spécificité de la page Web. Voici le résultat de mes explorations résumé en quelques lignes.

youtube-integrer

Recette-minute

Choisissez le code <intégrer> de Youtube qui correspond le mieux à votre page Web, puis repérez-en les éléments « href » (URL, ex: http://www.youtube.com/v/hYnqTNntGxU&hl=fr_FR…etc.), « width » (largeur, en pixels, ex: 560) et « height » (hauteur, en pixels, ex: 340) et recopiez-les à la bonne place dans le modèle ci-dessous:

<object type= »application/x-shockwave-flash » width= »largeur » height= »hauteur« data= »URL« ><param name= »movie » value= »URL » /><param name= »allowfullscreen » value= »true » /></object>

Comme disent les Américains, qui ont compris que les Français ont toujours sous la main une réponse simple pour n’importe quel problème complexe : « Et voilà! » ;~) Il suffit pourtant de chercher « youtube video valide code xhtml« , par exemple, pour trouver des réponses complexes à cette question apparemment toute simple. Comme disent les Français, « Pourquoi faire simple quand on peut faire américain? » </;~]

Explications et calculs plus détaillés

Continuer la lecture de « Comment bien intégrer une vidéo Youtube dans une page Web »

Première soirée-conférence W3Québec au Laïka

Voici les vidéos de la soirée-conférence du 20 avril diffusée en direct sur Ustream. L’outil CSS présenté par Normand Lamoureux ravira les intégrateurs Web mais ne leur laissera bientôt plus aucune excuse pour ne pas se préoccuper activement de la validité du code qu’ils produisent. Merci à W3Québec, aux conférenciers et à AccessibilitéWeb qui a commandité cette webdiffusion.

Cliquez sur la vidéo pour démarrer la première séquence ou choisissez directement celle qui vous intéresse dans la liste plus bas.

Your browser does not support iframes.

Côté technique, les conditions de tournage au Laïka ne sont pas les meilleures qui soient. La lumière est trop basse et il est impossible d’éclairer les orateurs sans faire disparaitre la projection du mur. Ceci dit, la qualité sonore (à part les toutes premières secondes) est bonne et le contenu est là.

Côté réseau, il n’y a eu aucun incident notable au Laïka, dont le réseau gratuit a tenu bon d’un bout à l’autre de la soirée. Il y a eu 122 visiteurs uniques en direct, dont 66 pendant la présentation très technique, mais importante, de Normand Lamoureux.

Côté social, cette première webdiffusion réussie donne à W3Québec un caractère associatif beaucoup plus ouvert aux régions du Québec, dont les membres ne peuvent pas se rendre à Montréal pour participer à ces activités de partage des connaissances. Il ne reste plus qu’à planifier la prochaine, normalement dans deux mois, et à songer à en organiser en région 🙂

Les présentations filmées de W3Québec

Depuis fin août, j’ai commencé à filmer chaque mois les présentations mensuelles de W3Québec, une association québécoise visant à promouvoir l’ensemble des normes, standards ouverts et bonnes pratiques du Web et du multimédia. Auparavant, nous tenions ces réunions montréalaises en duplex avec nos amis de Québec, à l’aide d’un lien de vidéoconférence légère. L’archivage vidéo apporte maintenant la pérennité à ces présentations tout en élargissant considérablement leur audience potentielle. Puisqu’il s’agit de promotion sans but lucratif, c’est tout bon.

Fin août, j’ai donc filmé l’introduction aux Web Services présentée par Benoît Piette (ses diapositives sont ici). Nous étions dans une grande salle du CRIM dont nous avions laissé une bonne partie des plafonniers allumés, ce qui fait que l’image est assez bonne (toutes restrictions gardées). J’ai inséré le petit logo de W3Québec semi-transparent dans Adobe Première Pro : l’effet est net et sans bavure.

Contenu disparu en même temps que Google Video

Introduction aux Web Services, par Benoît Piette (28.08.2006)

Fin septembre, nous avions droit à une présentation de Denis Boudreau, fraîchement revenu de ParisWeb 2006. Cela s’intitule Exploration du Web mobile (diapositives ici), un sujet dont Denis explique d’entrée de jeu qu’il n’est pas un expert. Ceci dit, son expertise générale des normes et technologies Web lui permet de défricher rapidement et efficacement la question, comme on peut le constater dans la vidéo. C’est d’ailleurs la situation dans laquelle se retrouvent souvent la plupart des professeurs ;->

Contenu disparu en même temps que Google Video

Exploration du Web mobile, par Denis Boudreault (25.09.2006)

Pris par le temps — ah! le colloque du RISQ ! — j’ai intégré le logo de W3Québec dans Ulead Video Studio Plus, un logiciel grand public que j’utilise souvent pour mes montages. C’est aussi avec cet outil que j’ai généré le fichier compressé envoyé à Google. Malheureusement, si ce logiciel est pratique et simple d’emploi, ses fonctions fines et ses codecs de sortie sont bien moins bons que ceux de Première (qui coûte, c’est vrai, beaucoup plus cher). Résultat : le logo de W3Québec est affreux!

Système d'éclairage légerJe tire deux autres enseignements techniques de cet enregistrement.

  1. Nous étions, cette fois, dans une plus petite salle dont la configuration nous a amenés à éteindre toutes les lumières. Nous n’étions éclairés que par l’écran sur lequel s’affichaient les diapositives. Il en résulte beaucoup de « bruit vidéo », ce qui m’a convaincu d’investir quelque 330 dollars (le prix en magasin) dans un petit système d’éclairage très paramétrable qui me permettra de corriger le problème à l’avenir. Nous pourrons en mesurer l’apport le mois prochain.
  2. Côté son, j’ai commis l’erreur de ne pas brancher de micro directionnel pendant les 10 premières minutes, pensant ainsi mieux capter l’atmosphère de cette petite salle. Mal m’en prit car, au final, le son qui en résulte n’est vraiment pas bon. Concentré sur mon problème d’éclairage, j’ai mis du temps à m’en rendre compte, mais les choses se sont arrangées ensuite, dès que j’ai pointé un micro externe vers Denis.

Je suis très heureux de pouvoir bénéficier chaque mois de l’expérience et de la perspicacité de professionnels ouverts et talentueux, comme le sont Benoît, Denis et tous ceux qui, comme eux, partagent leurs connaissances avec les membres de W3Québec. Je contribue comme je le peux à cet échange, espérant ainsi faire ma part pour que rayonnent les principes d’accessibilité et de normalisation dont W3Québec fait la promotion.

Pour conclure, précisons que ces vidéos véhiculent une bonne partie du contenu partagé, mais que la présence physique aux réunions permet de participer à l’échange, de le prolonger en s’y confrontant à d’autres points de vue et, à toutes fins utiles, de s’y constituer un réseau socio-professionnel de qualité. La vidéo ne communique pas cela. Raison de plus, si vous le pouvez, pour réserver votre « dernier lundi » de chaque mois afin de faire un tour au CRIM Montréal, de 19h à 21h. Stay tuned!


Ce billet a été publiée le 3 octobre 2006 sur economielogique.com et transféré ici le 15 mars 2009, en prévision de la fermeture prochaine de mon ancien site corporatif.