Dans l’ensemble, le Responsive Web Design / la conception de sites Web adaptatifs – les thèmes capables d’ajuster la mise en page d’un site Web à la taille de l’appareil de l’utilisateur – ont été un excellent ajout à WordPress et à l’internet, donnant aux webmestres la possibilité de répondre à l’expansion démographique des utilisateurs des téléphones intelligents et des tablettes. Nous avons déjà parlé de la conception de sites Web adaptatifs et même suggéré quelques thèmes adaptatifs pour WordPress.
Malheureusement, même si les thèmes sont capables d’ajuster le texte et les images pour répondre aux besoins de l’utilisateur, les vidéos elles restent souvent disproportionnées. Lorsque vous incorporez une vidéo sur votre site, elle ne s’adapte pas par défaut. Évidemment, c’est loin d’être idéal, surtout si vous comptez fortement sur le contenu vidéo comme c’est le cas pour de nombreux utilisateurs de WordPress.
Heureusement, il s’agit de WordPress dont nous parlons et avec WordPress, il y a toujours un moyen de contourner un problème. Dans ce cas particulier, la solution s’appelle FitVids.
Installation de FitVids
Comme vous l’avez probablement déjà deviné, FitVids est une extension conçue pour rendre les vidéos intégrées adaptatives. Pour obtenir l’extension, vous devrez accéder à votre tableau de bord de WordPress, aller à Extensions > Ajouter et saisir « FitVids pour WordPress » dans le champ de recherche.
Lorsque vous avez localisé l’extension, cliquez sur Installer maintenant, puis sur Activer l’extension au terme de l’installation.
Utilisation de FitVids
Après l’activation de FitVids, allez à Apparence et faites défiler jusqu’à l’option FitVids nouvellement ajoutée. Sur cette page, il vous suffit d’ajouter un sélecteur jQuery pour que l’extension fonctionne. WordPress va inscrire .post automatiquement dans le champ .post et cela satisfera vos exigences.
Vous n’avez besoin de rien d’autre, si ce n’est d’enregistrer les réglages et de générer un aperçu de votre site. Pour vous assurer que les vidéos ont été correctement redimensionnées, affichez votre site sur différentes tailles d’écran.
Installation manuelle de FitVids
Si vous préférez ne pas à utiliser l’extension FitVids (ce n’est pas tout le monde qui aime surcharger ses sites avec des extensions), il est également possible d’effectuer une installation manuelle.
Pour ce faire, vous devrez tout d’abord télécharger et décompresser l’extension jQuery FitVids de GitHub.
Ensuite, à l’aide de votre client FTP préféré, accédez au répertoire de votre thème WordPress et téléchargez FitVids.js-master pour le placer dans le dossier js. Si votre thème n’a pas ce dossier, il suffit d’en créer un et d’y télécharger le fichier.
Dans le dossier js, créez un nouveau fichier appelé FitVids.js et collez le code suivant :
(function($) {
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$(".post").fitVids();
});
})(jQuery);
Ce code va faire ce que la classe .post fait dans l’extension.
Enfin, dans le fichier functions.php du thème choisi, collez le code suivant pour ajouter JavaScript et rendre les vidéos adaptatives :
wp_enqueue_script('fitvids', get_template_directory_uri() .
'/js/FitVids.js-master/jquery.fitvids.js', array('jquery'), '', TRUE);
wp_enqueue_script('fitvids-xtra',
get_template_directory_uri() . '/js/FitVids.js', array(), '',
TRUE);
