Étiquette : css

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 🙂