• Centre de formation Joomla!
    Tutoriels et formation Joomla!
    Apprenez en vous formant à votre rythme, en toute liberté,
    créez votre propre site Web avec Joomla!

Tutoriel Logo Joomla 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

Note
Pour les besoins de ce tutoriel, vous devez avoir ajouté une vidéo dans un article. Si besoin, vous pouvez vous référer à ce tutoriel : Ajouter une vidéo dans un article".

Important
Pour éviter tout risque lié à une erreur de manipulation, je vous conseille de travailler sur des copies de vos fichiers originaux.

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.

Video RWD Joomla

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.

Video RWD Joomla

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.

Video RWD Joomla

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

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


 

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.