Ajouter des vidéos responsive sous WordPress avec FitVids.js

L’avènement du responsive design dans la communauté des concepteurs de thèmes WordPress nécessite d’aller plus loin dans le développement d’un thème. L’affichage d’une vidéo est l’une des complexités d’un design adaptatif dans le sens où nous devons prendre en compte le redimensionnement en fonction de la résolution du navigateur. C’est là qu’intervient le script FitVids.js que nous allons intégrer dans un thème WordPress en quelques minutes.

A propos de FitVids.js

Le premier réflexe pour faire en sorte que vos vidéos soient responsive consisterait à ajouter quelques propriétés CSS sur vos iframes. Or, cette vidéo vous persuadera du contraire :

D’ailleurs, si vous testez sur différentes plateformes une page WordPress contenant une vidéo, vous vous apercevrait rapidement que tout ne fonctionne pas comme espéré.

FitVids.js est donc la solution : il s’agit d’un script JavaScript reposant sur jQuery et vraiment pas compliqué à mettre en place, y compris pour une personne débutante qui prend peur à la première ligne de code…

Côté prise en charge des lecteurs vidéos : YouTube, Vimeo, Blip.tv, Viddler et Kickstart. On notera la possibilité d’ajouter son propre fournisseur de services. Je pense que Dailymotion pourrait être utile pour beaucoup d’entre vous.

Intégrer FitVids.js dans votre thème WordPress

Étape n°1 – Télécharger FitVids.js

Dans un premier temps, il nous faut obtenir la dernière copie en date du script hébergé sur GitHub. Cliquez simplement sur le bouton Download ZIP situé dans la partie droite ou récupérez simplement le script dans la colonne principale, soit environ 3 Ko.

FitVids.js

Un plugin jQuery, léger et facile à utiliser pour un affichage fluide de vos vidéos.

Taille : 3, 0 KiB  •  Date : 25 juillet 2013 •  Hits : 756

Étape n°2 – Ajout du script dans le thème

Commencez par ouvrir votre fichier functions.php. Bien que cela soit la méthode la plus simple, il est possible que certains thèmes placent les fonctions PHP relatives à l’ajout de scripts dans des fichiers séparés – c’est plus pratique selon moi.

Collez donc ces lignes de code entre les balises PHP :

/* Ajout du script fitvids.js */
function fitvids_js() {
 if (!is_admin()) {
 wp_register_script('fitvids', get_template_directory_uri().'/inc/js/jquery.fitvids.js', 'jquery', '1.0', true);
 wp_enqueue_script('fitvids');
 }
 }
 add_action('wp_enqueue_scripts', 'fitvids_js');

La fonction fitvids_js va enregistrer le script que nous appellerons fitvids et qui se situe dans le dossier /inc/js de votre thème. Prenez soin de modifier cette adresse si vous le souhaitez et envoyer le fichier que nous venons de télécharger sur le serveur.

Pour des questions d’optimisation des performances, le paramètre true place le script dans le footer.

Étape n°3 – Appel du plugin jQuery dans les pages

Il nous faut à présent indiquer sur quel conteneur le script doit se baser et l’appeler quand cela est nécessaire.

Le plus simple consiste à utiliser les hooks de WordPress en indiquant que nous voulons que le script soit appelé sur toutes les pages dans la partie <head> – on ne peux vraiment savoir sur quelles pages on affichera des vidéos.

Voici la fonction que j’utilise :

/* Vidéo responsive */
 function wpc_video_responsive() { ?>
 <script>
 jQuery(document).ready(function(){
 jQuery("#main").fitVids();
 });
 </script>
 <?php }
add_action('wp_head', 'wpc_video_responsive');

Le conteneur de l’exemple est la balise portant l’ID #main. A vous de l’identifier à l’aide des outils de développement des navigateurs – Firebug par exemple. C’est la partie du tutoriel qui n’est pas forcément évidente pour un débutant.

C’est tout l’intérêt de la vidéo podcast qui accompagne cet article.

Résultat final

Insérez simplement une vidéo dans une page de votre site – par exemple le code iframe d’une vidéo YouTube, et visionnez le résultat.

La vidéo se redimensionne en fonction de la taille de la fenêtre – autrement dit de la résolution.

FitVids.js est un excellent plugin jQuery pour faire en sorte que vos vidéos fonctionnent correctement sur toutes les résolutions. Ne vous y trompez pas !

Crédits photo : rjw1