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.

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 !