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 :

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 :

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 :

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.

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...

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

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.

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 :

Et maintenant, avec le portrait et le titre.

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

et

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/WordPress
  • 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