UNE VIDÉO YOUTUBE DANS UN ARTICLE
UNE VIDÉO YOUTUBE DANS UN ARTICLE
Techniques SPIP

Vous trouverez ici des trucs et astuces destinés aux développeurs de sites sous SPIP.

La majorité de ces trucs est consacrée aux filtres graphiques introduits dans SPIP 1.9. Il y a là en effet un vaste champ d’expérimentation pour les webmestres et les graphistes.

Chaque truc est suivi d’un forum auquel nous vous invitons à participer.

N.B. La présence de ces trucs et astuces sur notre site professionnel est destinée à faire connaître notre activité de création de sites sous SPIP. Vous pouvez librement utiliser les morceaux de code fournis ici dans vos propres squelettes. Vous pouvez reprendre ces exemples sur votre site ou dans les forums d’un autre site ; dans ce cas, nous vous demandons simplement d’avoir la courtoisie de référencer la page d’où est tiré le code repris.

XML

[SPIP 1.8] Voici une technique très simple : nous allons profiter de la possibilité de « joindre » un document « distant » (introduite dans SPIP 1.8) pour intégrer dans un article une vidéo installée sur YouTube [1].

Il est souvent difficile d’installer de la vidéo sur son propre site : espace disque insuffisant, bande passante limitée. Pour la plupart des gens, installer de la vidéo sur son propre site revient à espérer que personne n’ait l’idée de visiter le site... Plusieurs services permettent désormais d’uploader ses vidéos sur un serveur spécialisé, puis d’appeler ces fichiers depuis son propre site.

Un de ces services est YouTube. Jusqu’à nouvel ordre, il est gratuit et, par je ne sais quel mystère, pas encore pollué par des bandeaux publicitaires.

L’étape d’inscription et d’installation de ses propres fichiers vidéo ne nous importe pas ici, je vous laisse tenter l’expérience. Imaginons que nous avons réussi à installer le fichier vidéo sur YouTube ou que nous avons sélectionné un fichier qui nous intéresse. Par exemple, le petit dernier participe à Questions pour un champion.

Sous l’animation Flash qui contient le film, recherchez la ligne « Embeddable Player » (en rouge sur la copie d’écran ci-dessus). Vous y récupérerez un code HTML qui ressemble à ceci :

  1. <object width="425" height="350">
  2. <param name="movie" value="http://www.youtube.com/v/HSoVKUVOnfQ"></param>
  3. <embed src="http://www.youtube.com/v/HSoVKUVOnfQ" type="application/x-shockwave-flash" width="425" height="350"></embed>
  4. </object>

Les informations qui nous intéressent ici sont :
— l’adresse du fichier Flash, qui apparaît deux fois dans ces lignes :
http://www.youtube.com/v/HSoVKUVOnfQ
— les dimensions du fichier : 425 × 350 pixels.

Rendons-nous dans notre article (sur notre site SPIP, donc). Dans l’interface « Ajouter un document », déplions les informations masquées, pour afficher la case « Référencer un document sur l’internet » : nous y recopions l’adresse du fichier Flash.

Une fois ce document référencé, l’interface de droite (sur la copie d’écran ci-dessus) est disponible. Il faut impérativement y installer les dimensions de l’animation, de façon à pouvoir intégrer (embed) l’animation directement dans le corps de notre article.

Cela fait, le code pour l’« Inclusion directe » apparaît, et il suffit de copier-coller dans le corps de l’article le raccourci de la forme :

Si vous avez bien suivi, le fichier vidéo ne se trouve jamais physiquement recopié sur votre propre serveur : l’article se contente d’afficher l’animation dans la page, en faisant appel au fichier stocké sur les machines de YouTube. Vous économisez ainsi la bande passante de votre propre hébergeur.

Insistons tout de même sur les limites d’une telle méthode :
— vous dépendez d’un hébergeur tiers pour stocker vos films ; si cet hébergeur fait faillite ou change de politique commerciale, vos films risquent de ne plus être accessibles, et il vous faudra trouver une autre solution (modifier vos propres pages) ;
— surtout, un jour ou l’autre, votre film sera précédé de quelques secondes de pubs forcément pénibles ; c’est sans doute l’intérêt pour YouTube d’encapsuler vos films dans une animation Flash (il sera facile d’ajouter des publicités par la suite).


[1] Je dis YouTube parce que j’ai essayé avec celui-là. Vous pouvez essayer avec tout autre hébergeur de fichiers vidéo aux fonctionnalités similaires.

Mars 2006
Une vidéo YouTube dans un article
Sylvain (sylvain chez guaph.net)

Salut,

la note de bas de page (1er paragraphe) à sauté, petit oubli dans le squelette ?
(on a juste le title="...")

rooooh !
- c’est du niveau de première année ça enfin ;-)

a+

Mars 2006
Une vidéo YouTube dans un article
ARNO* (arnaud chez paris-beyrouth.net)

petit oubli dans le squelette ?

Roooooh ! Merci, c’est corrigé !

Août 2006
Une vidéo YouTube dans un article
cent20

Salut Arno,

On a une contrib en attente sur spip-contrib, si tu pouvais donner ton avis ce serait sympa.

Octobre 2006
Une vidéo YouTube dans un article

Bonjour

C’est bien ça ne marche pas sur mon site, derniere version de spip, rien n’apparait dans la liste de mes docs. une idée ?

Merci

Novembre 2006
Une vidéo YouTube dans un article
Bernard

Un petit truc amusant à faire avec ce site. Ne prendre que la ref de certaines vidéos et faire un tirage aleatoire. Ca marche nickel !

Janvier 2007
Une vidéo YouTube dans un article
CHOUPA

pouvons nous crée nos propre vidéo avec nos photo et rajouter un son

Février 2007
Une vidéo YouTube dans un article

Bonjour

Je viens d’installer SPIP 1.9.1 [7502] et je ne vois pas la fonction "référencer un document sur internet", seulement à partir de mon ordinateur. Qu’aurais-je raté ?

Merci d’avance

Mai 2007
Une vidéo YouTube dans un article
dominique (dbrunel chez lmdb-editorial.com)

Une fois ce document référencé, l’interface de droite (sur la copie d’écran ci-dessus) est disponible.

Et bien chez moi, ça n’apparaît pas (SPIP 1.9.2).

J’avais collé : http://www.youtube.com/watch ?v=KMR1TA0-HvA

une idée ?

merci

dominique

Mai 2007
Une vidéo YouTube dans un article
LaGazelle (lagazellenoire chez wanadoo.fr)


- solution 1 peut-etre qu’il y a deux fois le "http:// puisqu’il est déja par défaut.
- solution deux : c’est bien dans la partie "insérer un document"

A chaque fois que cela n’a pas fonctionné chez moi, c’est parce que - l’adresse n’était pas la bonne - il y avait en fait un http://http://www.nimportequoidautre
- solution 3 (en ce qui concerne dailymotion : ca ne fonctionne pas avec le permalien...

Septembre 2007
Une vidéo YouTube dans un article
zwan (zwan.bourg chez caramail.com)

Super, je l’ai essayé et c’est magnifique ! Et ça permet de définir l’alignement de l’objet ! Mais il n’y aurait pas un moyen d’avoir le thumbnail (vignette) de la vidéo généré par Youtube ?

il y a 6 mois
classe de 1BSEC
charmelle974 (charmelle974 chez hotmail.com)

cool et sympa

il y a 5 mois
Une vidéo YouTube dans un article
ouedraogo (raoulouedraogo chez gmail.com)

Mais ça marche et merci , Cependant il n’est pas possible de la visionner avec internet explorer ou safari pourqu’oi ?

il y a 5 mois
Une vidéo YouTube dans un article
ouedraogo (raoulouedraogo chez gmail.com)

Je viens de trouver la solution a mon problème alors je vous la donne au cas ou ? Juste =en à la place de =fr à la fin du code après le docId

On peut aussi ne rien mettre mais chaque fois j’ai eu un probléme de lecture dans certain environnments , Mac OS par exemple. Bref j’espère que cela aide un de nous

il y a 4 mois
Une vidéo YouTube dans un article
basé a force vraiment (dtc chez capue.com)

et sous spip 1.9.2c ?

il y a 3 semaines
Une vidéo YouTube dans un article
marseillaizeuhh94290

pck ya des amiis kon oubli pas !!!

il y a 3 semaines
Une vidéo YouTube dans un article
Marco

Pourquoi ne pas utiliser l’intégralité du code proposé pas YouTube ?

il y a 2 semaines
Une vidéo YouTube dans un article
alix (la-rebelle-943 chez hotmail.com)

nous deux jtm

Votre message :
Un message, un commentaire ?

(Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)