Utiliser les lecteurs Vimeo dans SPIP en responsive design...

Publié le .

SPIP Responsive Design Vimeo
Utiliser les lecteurs Vimeo dans SPIP en responsive (...)

Vimeo est un site web communautaire destiné au partage et au visionnage de vidéos faite par les utilisateurs selon Wikipedia. Un de leur avantage est l’absence de publicité sur les vidéos. Ils proposent lecteur universel. C’est lui que nous allons utiliser dans un modèle SPIP.

Le modèle SPIP contenant le lecteur universel de vimeo personnalisable

Pour mieux comprendre le modèle SPIP contenant le lecteur universel de vimeo personnalisable, nous allons d’abord voir quelques informations fournies par Vimeo.

Voici l’exemple du lecteur embarqué universel donné par vimeo :

  1. <iframe src="//player.vimeo.com/video/VIDEO_ID" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Ci-dessous, la liste des paramètres que l’on peut passer dans l’url de l’iframe.

autopause Active ou désactive la pause d’une vidéo lorsqu’une autre est joué. 1 par défaut.
autoplay Lance automatiquement la lecture de la vidéo au chargement de la page. 0 par défaut. Notez que cela ne marche pas sur tous les appareils.
badge Active ou désative le badge sur la vidéo. 1 par défaut.
byline Affiche ou pas la ligne avec le nom de l’utilisateur vimeo. 1 par défaut.
color Spécifie la couleur des buttons de control de la vidéo. 00adef par defaut. Prenez soin de ne pas inclure le #.
loop Rejouez la video lorsqu’elle arrive à la fin. 0 par défaut.
player_id Un id unique pour le lecteur qui est à utiliser avec l’API javascript.
portrait Affiche ou pas le portrait de l’utilisateur. 1 par défaut.
title Affiche le titre de la vidéo. 1 par défaut.

Et voici donc le modèle SPIP :

  1. [(#REM) Initialisation]
  2. #SET{width,870}
  3. #SET{height,489}
  4. #SET{title,0}
  5. #SET{byline,0}
  6. #SET{portrait,0}
  7. #SET{badge,0}
  8. #SET{color,ffffff}
  9. #SET{autoplay,0}
  10. #SET{autopause,1}
  11. #SET{loop,0}
  12.  
  13.  
  14. [(#REM) Personnalisation ]
  15. [(#SET{width,[(#ENV{width,[(#GET{width})]})]})]
  16. [(#SET{height,[(#ENV{height,[(#GET{height})]})]})]
  17. [(#SET{title,[(#ENV{title,[(#GET{title})]})]})]
  18. [(#SET{byline,[(#ENV{byline,[(#GET{byline})]})]})]
  19. [(#SET{portrait,[(#ENV{portrait,[(#GET{portrait})]})]})]
  20. [(#SET{badge,[(#ENV{badge,[(#GET{badge})]})]})]
  21. [(#SET{color,[(#ENV{color,[(#GET{color})]})]})]
  22. [(#SET{autoplay,[(#ENV{autoplay,[(#GET{autoplay})]})]})]
  23. [(#SET{autopause,[(#ENV{autopause,[(#GET{autopause})]})]})]
  24. [(#SET{loop,[(#ENV{loop,[(#GET{loop})]})]})]
  25.  
  26. <div class="videoWrapper">
  27. <iframe
  28.     src="http://player.vimeo.com/video/[(#ENV{id})]?title=#GET{title}&byline=#GET{byline}&portrait=#GET{portrait}&badge=#GET{badge}&color=#GET{color}&autoplay=#GET{autoplay}&autopause=#GET{autopause}&loop=#GET{loop}"
  29.     width="#GET{width}"
  30.     height="#GET{height}"
  31.     frameborder="0"
  32.     webkitallowfullscreen
  33.     mozallowfullscreen
  34.     allowfullscreen>
  35. </iframe>
  36. </div>

Télécharger

On met ce code dans un fichier HTML que l’on appelle lecteur_vimeo.html et que l’on glisse dans le répertoires modeles de squelettes.

Et maintenant, un peu de css pour la mise en forme en responsiv design :

  1. .videoWrapper {
  2.     position: relative;
  3.     padding-bottom: 56.25%;
  4.     height: 0;
  5.     margin-bottom: 15px;
  6. }
  7. .videoWrapper iframe {
  8.     position: absolute;
  9.     top: 0;
  10.     left: 0;
  11.     width: 100%;
  12.     height: 100%;
  13. }

Télécharger

C’est une mise en forme responsive design que j’ai trouvé sur internet il y a quelques temps, mais je ne retrouve plus la source... Mais, ça marche ! C’est le principal !

La magie du modèle SPIP pour intégrer le lecteur universel vimeo

On initialise les valeurs par défaut des différents paramètres.

  1. [(#REM) Initialisation]
  2. #SET{width,870}
  3. #SET{height,489}
  4. #SET{title,0}
  5. #SET{byline,0}
  6. #SET{portrait,0}
  7. #SET{badge,1}
  8. #SET{color,ffffff}
  9. #SET{autoplay,0}
  10. #SET{autopause,1}
  11. #SET{loop,0}

Télécharger

Ici, vous pouvez changer les valeur d’initialisation pour obtenir par défaut des lecteurs à votre convenance. En ce qui concerne la largeur, j’ai mis la largeur maximum qu’aura une vidéo pour occuper 100% de la largeur de mon site lorsque celui-ci est le plus large... La hauteur en découle. Ensuite, le reste dépend de vous... Il est évidemment conseillé de mettre une couleur qui colle à celle de votre chartre graphique. En ce qui concerne les autres paramètres, à vous de voir... Cela dépend vraiment. Personnellement, comme les vidéos que je met sur mon site sont souvent les miennes, je ne met, par défaut, ni le portrait, ni le nom de l’utilisateur... Par contre, lorsque les vidéos ne sont pas de moi, je les ajoute.

On remplace les valeurs initiales des différentes valeurs si on passe de nouvelles valeurs par l’intermédiaire des paramètres adéquats lors de l’appel du modèle...

  1. [(#REM) Personnalisation ]
  2. [(#SET{width,[(#ENV{width,[(#GET{width})]})]})]
  3. [(#SET{height,[(#ENV{height,[(#GET{height})]})]})]
  4. [(#SET{title,[(#ENV{title,[(#GET{title})]})]})]
  5. [(#SET{byline,[(#ENV{byline,[(#GET{byline})]})]})]
  6. [(#SET{portrait,[(#ENV{portrait,[(#GET{portrait})]})]})]
  7. [(#SET{badge,[(#ENV{badge,[(#GET{badge})]})]})]
  8. [(#SET{color,[(#ENV{color,[(#GET{color})]})]})]
  9. [(#SET{autoplay,[(#ENV{autoplay,[(#GET{autoplay})]})]})]
  10. [(#SET{autopause,[(#ENV{autopause,[(#GET{autopause})]})]})]
  11. [(#SET{loop,[(#ENV{loop,[(#GET{loop})]})]})]

Télécharger

Cette partie mérite peut être quelque explications ! Par exemple, que fait exactement cette ligne de code :

  1. [(#SET{width,[(#ENV{width,[(#GET{width})]})]})]

Tout d’abord #SET{width,xxx} permet d’attribuer la valeur "xxx" à la variable width.

Ensuite [(#GET{width})] permet de récupérer la valeur de la variable "width".

[(#ENV{width,yyy})] récupère la valeur du paramètre "width" passé en argument au modèle. "yyy" est la valeur par défaut si on ne passe par le paramètre "width" en argument.

  1. [(#SET{width,[(#ENV{width,[(#GET{width})]})]})]

veut donc dire : je donne à la variable "width" la valeur de "width" passé en argument au modèle, sinon, je lui donne la valeur de la variable "width" attribuée dans la partie "Initialisation" ! Je ne suis pas sur d’être très clair là !!!

Voici comment utiliser le modèle SPIP lecteur_vimeo

Tout d’abord, il vous faut l’id de la vidéo. C’est simple, rendez-vous sur une vidéo et regardez son url. A la fin, il y a un chiffre. C’est l’id de la vidéo.

Voici l’intégration basique de ce lecteur dans un article et le résultat en dessous :

  1. <lecteur_vimeo|identifiant=90399590>

Et maintenant, avec le portrait et le titre.

  1. <lecteur_vimeo|identifiant=90399590|portrait=1|title=1>

Pour l’équivalent dans un squelette, on mettra :

  1. [(#MODELE{lecteur_vimeo}{identifiant=90399590})]

et

  1. [(#MODELE{lecteur_vimeo}{identifiant=90399590}{portrait=1}{title=1})]

Le mot de la fin

Voilà, c’est fini ! Vous avez tous les éléments pour intégrer facilement le lecteur universel de vimeo ! Nous allons bientôt l’utiliser dans une boucle DATA afin de parcourir un album...

Vous avez aimé ? Partager !

Twitter Facebook Google Plus Tumblr Linkedin

Répondre à cet article

Tous les champs sont obligatoires

Qui êtes-vous ?
Ajoutez votre commentaire ici

  • Pour créer des paragraphes, laissez simplement des lignes vides. Par ailleurs, les raccourcis SPIP [nom du lien->lien] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins> sont acceptés.

Suivre les commentaires : RSS 2.0 | Atom