Vidéos YouTube et Vimeo automatiquement responsives sur votre site Joomla!

Parmi les nombreux Trucs & Astuces sur Joomla! de Cinnk se trouve un article qui explique la manière communément utilisée pour rendre une vidéo YouTube ou Viméo responsive.

En fait, cette technique peut être bien entendu utilisée pour rendre n'importe quel iFrame responsive, qu'il s'agisse d'une vidéo ou d'un autre lecteur (audio, flipping book, ...).

Rappelons ici brièvement comment on procède :

  • on entoure l'iFrame d'une DIV à laquelle on attribue une classe
  • cette classe est définie dans le fichier css de votre site (souvent custom.css)

Dans le HTML de l’article ou du module :

 

    <!– copier-coller le code depuis YouTube -->
    <iframewidth="560" height="349" src="http://www.youtube.com/embed/Dh1Uda6l5Og">

Dans le CSS du site :

.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Cette solution fonctionne certes très bien, mais elle oblige d'ajouter manuellement dans le HTML cette fameuse DIV autour de l'iFrame...

Si les vidéos à insérer dans le site sont nombreuses et/ou si l'utilisateur final n'est pas trop à l'aise avec le HTML et/ou si on est paresseux/efficace, il est possible d'automatiser cela très facilement !

Voici concrètement comment procéder :

  • Installer le plugin ReReplacer de Regular Labs
    https://www.regularlabs.com/extensions/rereplacer
  • Dans Composants > Regular Labs ReReplacer cliquer sur Nouveau
  • Mettre l'option "Expressions régulières" sur Oui
  • Mettre l'option "Utilise le transformateur newline" sur Non
  • Dans le champ Remplacer, indiquer
    <iframe(.*)src="(.*)(youtube|vimeo)(.*)"(.*)<\/iframe>
  • Dans le champ Remplacer, indiquer
    $0

Dorénavant, ce qui devait être fait manuellement pour chaque vidéo se fait automatiquement à la volée...

videos responsives

La boutique

Trucs @ Astuces Joomla! 3Le livre 100 Trucs & Astuces pour Joomla! 3
vous permet de faire les bons choix parmi ceux qui s'offrent à vous lors de la création de votre site web ou lors de l'ajout de fonctionnalités ou d'extension grâce à de simple conseils, de vous simplifier la tâche grâce à des astuces et des mini-tutoriels pour gagner du temps dans la gestion de votre site Joomla!, ainsi que dans l'organisation de sa sécurité, son référencement, ses performances, et bien plus encore.

Aller plus loin

Comme on peut le voir à partir de cet exemple, les Expressions Régulières (RegEx) sont un outil très puissant, notamment pour faire des recherches/remplacements. Si vous souhaitez mieux comprendre comment cela fonctionne et -éventuellement- adapter le ReGex à vos besoins, vous pouvez repartir du présent exemple grâce à l'outil suivant : https://regex101.com/r/gM2hZ8/2

Notez cet article:
2
Joomla 3.5 quelques nouvelles fonctionnalités et u...
L'équipe Joomla! Events team recherche de nouveaux...

Commentaires 1

 
marie-louise le mardi 13 octobre 2015 17:24

Super article, encore un que je vais mettre dans mes favoris pour retrouver dès que j'en aurais besoin, j'ajouterais juste une petite note que je viens de piquer sur le forum joomla, moi qui cherchait cette définition partout je la trouve par hasard

iframe (Fenetre intégrée -> contenu externe)

Super article, encore un que je vais mettre dans mes favoris pour retrouver dès que j'en aurais besoin, j'ajouterais juste une petite note que je viens de piquer sur le forum joomla, moi qui cherchait cette définition partout je la trouve par hasard iframe (Fenetre intégrée -> contenu externe)
Déjà inscrit ? Connectez-vous ici
Guest
lundi 15 juillet 2019
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.