Tutoriel Joomla

Rendre une vidéo Responsive dans Joomla

Aujourd'hui, la plupart des sites web sont conçus de manière à s'afficher aussi bien sur les ordinateurs, les tablettes que les smartphones. Cela implique que tout le contenu puisse s'adapter à ces différents écrans. Joomla vous permet de rendre n'importe quelle vidéo "Responsive Design" sans ajouter la moindre extension tierce. Nous allons voir au travers de ce tutoriel "comment rendre une vidéo Responsive Design" dans Joomla.

Table des matières
- Ajouter le code CSS
- Ajouter le code HTML

Ajouter le code CSS

Pour afficher n'importe quelle vidéo en mode "Responsive Design", nous aurons besoin d'ajouter un peu de code dans un fichier CSS de votre template. Pour cela, ouvrez votre client FTP et connectez-vous à votre hébergement. Ouvrez le dossier "Template" puis le dossier contenant le template de votre site Joomla et enfin, le dossier contenant les fichiers CSS.

Transférer sur votre ordinateur le fichier "template.css". Faites en une copie de sécurité puis ouvrez-le avec votre éditeur de texte préféré. A la fin du fichier, rajoutez le code suivant :

.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Enregistrez votre saisie et renvoyez le fichier sur le serveur avec votre client FTP.

Ajouter le code HTML

Nous allons maintenant pouvoir ajouter notre vidéo dans un article. Pour cela, cliquer sur "Contenu - Gestion des articles" puis, choisissez un article.

Sous la zone de saisie du texte, cliquez sur le bouton "Basculer l'éditeur". Le contenu de votre article s'affiche maintenant en langage HTML.

Repérez la ligne contenant l'iframe de Youtube.

Replacez-la par le code suivant. Cliquez ensuite sur "Enregistrer & Fermer".

	<div class="video-responsive">
	...code iframe récupéré sur Youtube...
	</div>