Written by Nous allons voir comment faciliter l’indexaction de votre site par les moteurs de recherche avec l’utilisation d’un sitemap ou plan de site en français.
Il y a quelques mois j’ai passé un peu de temps à rechercher un module YouTube pour Joomla! qui m’offrirait 3 choses importantes : (Entièrement) responsive design, lecture automatique et possibilité de couper le son. Le Joomla! Extensions Directory propose plus de 100 extensions dans la section Module lorsque l’on fait une recherche avec le mot clé “youtube”, mais aucune de ces extensions ne répondait à mes besoins. L’API YouTube v3 offre de nombreuses possibilités, pourquoi aucune de ces extensions ne les utilise ? Pourquoi ne sont-elles pas responsive? – Oui, cela était ennuyeux, j’ai donc commencé dès le landemain un nouveau projet sur GitHub, nx-YouTubeBox était né. Mais que peut vous apporter cette extension ?
Aperçu – Pourquoi un nouveau module YouTube était nécessaire ?
Il y a quelques mois j’ai passé un peu de temps à rechercher un module YouTube pour Joomla! qui m’offrirait 3 choses importantes : (Entièrement) responsive design, lecture automatique et possibilité de couper le son. Le Joomla! Extensions Directory propose plus de 100 extensions dans la section Module lorsque l’on fait une recherche avec le mot clé “youtube”, mais aucune de ces extensions ne répondait à mes besoins. L’API YouTube v3 offre de nombreuses possibilités, pourquoi aucune de ces extensions ne les utilise ? Pourquoi ne sont-elles pas responsive? – Oui, cela était ennuyeux, j’ai donc commencé dès le landemain un nouveau projet sur GitHub, nx-YouTubeBox était né. Mais que peut vous apporter cette extension ?
Faits avérés – Voici quelques données clé sur le module
L’API YouTube API propose 18 options pour contrôler votre Video Player, nxYouTubeBox les combine en 12 options configurables que vous pouvez régler via le backend. Par exemple : Silence, Lecture en boucle, Volume par défaut, Lecture pour Mobile, Annotations, Info de la Video, Videos en relation et d’autres options natives de l’APIv3. Le module peut lire des Vidéos uniques, des Playlists, des Vidéos par Utilisateurs ou vous pouvez également utiliser une recherche pour afficher une Playlist générée automatiquement à partir de YouTube. Le Section de style vous prmet de régler une option Shadow, les bordures ainsi que deux styles différents pour le Player. Le container de la vidéo occupe toujours 100% de la largeur disponible du container parent et calcul la hauteur automatiquement, même si vous modifier la taille de la fenêtre.
Téléchargement et installation
Nous n’allons pas perdre de temps à détailler la procédure d’installation. Vous pouvez télécharger le module gratuitement à partir du Joomla! Extensions Directory, ou sur notre siteweb (http://youtubebox.nx-designs.ch) ou directement à partir de GitHub et l’installer comme n’importe quelle extension, via Extensions > Gestion > Installer. Une fois l’installation terminée, nous pouvons commencer.
Configuration – Coup d’œil sur les options backend
Regardons les différentes options disponibles (yeah il y en a plusieurs…). Dans les Options Sources vous avez le choix entre Single Video ou Playlist Mode, les Options en-dessous dépendent de votre sélection. Avec le mode Single Video vous pouvez mettre l’ID de la vidéo, l’URL ou la Short URL de la vidéo. Le champs Video en-dessous notre montre le Poster de la Video/Playlist sélectionnée.
La section suivante dans l’onglet Basic est nommée Player Options, le cœur du module. Comme décrit auparavant, les option du Player vous propose de nombreux paramétrages de l’API v3 de YouTube. Si vous avez besoin de plus d’informations au sujet d’une option, survolez simplement le titre de l’option afin de faire apparaitre la description.
Regardons le style
L’onglet Styling vous propose de nombreuses options vous permettant de personnaliser votre Videoplayer. Si l’onglet Basic est le cœur du Module, La section Styling est son âme. La première option dans l’écran de Style est appelée Visual Style. Le Player comes propose 2 Options de visualisation, une vue par défaut (Videoplayer normal / Responsive) et le mode nx-HeaderMode qui est également responsive mais qui vous permet également de spécifier l’aire d’affichage de la video. dans le mode nx-HeaderMode vous pouvez rogner l’aire d’affichage de la video, cela signifie que vous pouvez afficher la vidéo en pleine largeur mais avec seulement 50% de sa hauteur :
Si vous sélectionnez le mode nx-HeaderMode vous pouvez régler la hauteur du Container Vidéo ainsi que le mouvement vertical en pourcentage de cette hauteur. Vous pouvez donc centrer la vidéo si besoin. Vous pouvez donc paramétrer une vidéo en header de page, et avec l’option Vide Start Time vous pouvez régler la seconde exacte à laquelle débutera la vidéo.
Comme vous pouvez le voir, il n’y a pas d’option pour régler la largeur du Container Video – donc comment faire si vous souhaitez afficher la vidéo avec seulement 50% de largeur ? Il n’y a pas d’options pour cela. Mais attendez, ne me jettez pas de pierre. Pourquoi le module lui même devrait gérer cela si nous utilisons déjà une sorte de “Template Joomla! haute technologie” qui inclue une sorte de framework avec un système de grille intégré (par exemple Bootstrap ou uikit). Vous trouverez donc l’option Module Class Suffix dans l’onglet Avancé. Entrez simplement le nom de class qui est utilisé par votre template pour controler le comportement de la grille, comme par exemple “span6”, “uk-width-1-2” ou “col-md-6”.
Certaines options de style comme Corner Radius ou Video Rotation sont seulement disponible dans le mode par défaut. L’option Video Rotation vous permet de tourner le Container Video de -89 à 90 degrés. En combinant cela avec les options Border et Shadow vous pouvez créer une apparence Polaroid Look pour vos vidéos.
Chaque option (Basic et Styling) est un paramètre individeul pour cette instance. Cela signifie que si vous utilisez plusieurs Videos sur la même page elles peuvent toutes prendre un style particulier :
Une autre fonctionnalité de Styel est Blocklayer. C’est une autre div (invisible) qu dessus de votre Video qui va bloquer l’interactions de clics sur votre video. Pour obtenir un effet de slide vous pouvez insérer une ombre interne sur votre Video ou définir une couleur rgba. Par ailleurs : Chaque réglage d’ombre ou de bordure peut être configuré avec différentes couleurs et différentes épaisseur :
En conclusion, nx-YouTubeBox est une solution pour les besoins simples et avancés comme par exemple: Option d’ombre configurable, Radius d’angle, Bordure individeulle, Lecture automatique sans son ou un header animé, nxYouTubeBox est la questions.
About the author
Marco Rensch
I am a freelance developer, webmaster, photograph and graphic designer. My main motivation is to design simple solutions which offer the most possible freedom of individualization for the webmaster out there.“ …and all that beside my 100% Job for a Swiss Telecom Provider 🙂