Utiliser le lecteur universel de Viméo personnalisable dans SPIP en responsive design

Facebook Twitter Google Plus Linkedin
Blog : Utiliser le lecteur universel de Viméo personnalisable dans SPIP en responsive design

Vimeo est un site web communautaire destiné au partage et au visionnage de vidéos faites par les utilisateurs selon Wikipedia. Un de ses avantages est l’absence de publicité sur les vidéos. Il propose 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.

autopauseActive ou désactive la pause d’une vidéo lorsqu’une autre est joué. 1 par défaut.
autoplayLance 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.
badgeActive ou désative le badge sur la vidéo. 1 par défaut.
bylineAffiche ou pas la ligne avec le nom de l’utilisateur vimeo. 1 par défaut.
colorSpécifie la couleur des buttons de control de la vidéo. 00adef par defaut. Prenez soin de ne pas inclure le #.
loopRejouez la video lorsqu’elle arrive à la fin. 0 par défaut.
player_idUn id unique pour le lecteur qui est à utiliser avec l’API javascript.
portraitAffiche ou pas le portrait de l’utilisateur. 1 par défaut.
titleAffiche 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épertoire modeles de squelettes.

Et maintenant, un peu de css pour la mise en forme en responsive 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 valeurs 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 personnel 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 charte graphique. En ce qui concerne les autres paramètres, à vous de voir... Cela dépend vraiment. Personnellement, comme les vidéos que je mets sur mon site sont souvent les miennes, je ne mets, 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 sûr 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’identifiant 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=91549549>

Et maintenant, avec le portrait et le titre.

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

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

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

et

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

Attention ! Si le propriétaire est un Plus Member, certains de ses paramètres seront prioritaires. Ce qui veut dire que vous n’aurez pas la main dessus.

Le mot de la fin

Voilà, c’est fini ! Vous avez tous les éléments pour intégrer facilement le lecteur universel de vimeo !


Commentaires


Laisser un commentaire

Contactez-nous !

  • 01 40 09 18 18

Suivez-nous...

Nos Services

Nos services s'articulent autour des thèmes suivants :

  • Création & refonte de sites web SPIP
  • Webmastering, référencement, SEO
  • Applications métiers et CRM Dolibarr
  • Création de contenu éditorial et vidéo
  • Web App., iOS & Android

Qui sommes-nous ?

Artaban est une agence web qui s'appuie sur une petite équipe pluridisciplinaire. Nous sommes des artisans alliant souplesse, compétence et savoir-faire.

Mots clés