Tuto-FR : SPIP - Un include vidéo sous SPIP
Avec SPIP, il est assez facile de rendre dynamique un écran vidéo sur une page, que la vidéo soit hébergée chez dailymotion, youtube ou viméo.
Un include vidéo sur SPIP
Mettre la dernière vidéo du site en page d'accueil automatiquement, c'est simple. Il faut pour plus de clareté créer un mot clé qui s'appele par exemple vidéo et (pour cet exemple) a le numéro 99 comme mot clé.
Le mot clé va nous servir à sélectionner tous les articles qui auront une vidéo (il ne faut pas oublier du coup de mettre le mot clé sur ces fameux articles). Ensuite dans un fichier inc-video.html on écrit une boucle articles qui sélectionne ces fameux articles ayant le mot clé 99, puis une boucle documents pour récupérer le fichier vidéo :
<div id="video">
<BOUCLE_articles_vid(ARTICLES) {id_mot=99} {par date} {inverse}{0,1}>
<BOUCLE_vid(DOCUMENTS){id_article}{extension==swf} {mode=document}{0,1}><!-- vidéo -->
<object type="application/x-shockwave-flash" width="140" height="105" data="[(#URL_DOCUMENT)]">
<param name="movie" value="[(#URL_DOCUMENT)]" /><param name="wmode" value="transparent" />vidéo #TITRE
</object><!-- vidéo -->
[<strong>(#TITRE|couper{20})</strong><br /> ]
[<small><em>(#DESCRIPTIF|couper{30})</em></small><br /> ]
</BOUCLE_vid>
</BOUCLE_articles_vid>
</div>
Vous pouvez, en respectant les proportions, définir la hauteur et la largeur qui convient. Je vous conseille de rajouter la ligne pour mettre le wmode en transparence pour éviter que la vidéo passe au dessus d'élément comme une lightbox par exemple.
Il ne faut pas oublier ensuite de mettre en document joint l'adresse du fichier vidéo.
Par exemple, chez viméo l'adresse du fichier ressemble à "http://vimeo.com/moogaloop.swf?clip_id=6032081", youtube "http://www.youtube.com/v/2uJE48aKVNo" et dailymotion "http://www.dailymotion.com/swf/xa36cw_the-pierces-turn-on-billie_music". Ces adresses vous les trouvez généralement dans le code pour exporter la vidéo : embed src="http://...".
Ensuite comme pour tous les includes, vous insérez la ligne <INCLURE{fond=inc-video}> dans votre page, là où vous voulez la voir apparaître.<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=6032081&server=vimeo.com&show_title=1&show_byline=0&show_portrait=1&color=00adef&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=6032081&server=vimeo.com&show_title=1&show_byline=0&show_portrait=1&color=00adef&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object>
Pour plus de détail sur certaines fonctions, vous pouvez lire aussi Une vidéo YouTube dans un article sur le site excellent de paris-beyrouth.org !
PS : pour rappel la balise embed n'est pas recommandé par le W3C !!!!!!
Publié le mardi 11 août 2009 par Matias Grenn