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 : 646

É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

23 commentaires

        1. Bon, l’affichage n’est pas responsive par contre la visualisation l’est car gérée par le tél.
          Par contre, ça irait pas plus vite de hacker la fonction qui affiche en embed les vidéos : si mobile, embed en responsive…

          1. Non je te garantis que ce script est déjà optimal. Il pèse 3 Ko et gère très bien le responsive. Ce n’est pas une question de terminal cible mais bien de résolutions c’est là toute la différence.

    1. J’ai visionné la vidéo et c’est que propose fitvids.js en réalité sauf que lui le fait pour toutes les vidéos. Ainsi, un utilisateur WordPress n’a pas à se soucier de penser à faire en sorte que la vidéo soit responsive – d’ailleurs, il n’est pas dans l’obligation de connaître cela. Donc la méthode décrite ici automatise le processus.

  1. Merci pour ce tuto que j’ai suivi à la lettre, qui fonctionne effectivement très bien avec les iframe de Youtube, mais malheureusement pas avec les iframes de mon espace VOD chez Infomaniak
    Je me demandais s’il était possible d’obtenir une aide pour trouver une solution ?
    Merci d’avance.

          1. Mais aussi étonnant que cela puisse paraître, j’ai inséré une nouvelle vidéo sur une nouvelle page, exactement de la même façon que la première, cette vidéo est hébergée de la même façon et le player est strictement identique, pourtant le comportement de celle-ci sur iPhone est très différente… après chargement de la page, le player s’étend anormalement en dehors de l’écran !
            J’ai essayé de remplacer ce code iframe par le code iframe de la précédente vidéo, et là ça fonctionne parfaitement. Il n’y a finalement que le lien du fichier qui change vraiment, et pourtant ça ne fonctionne pas avec cette deuxième vidéo !
            Je vois pas de quoi cela peut venir !?

  2. bonjour aurélien
    aurais-tu trouvé un plugin qui permette d’insérer dans des articles des iframe en responsive design ? je n’ai pas trouvé. mon site est entièrement responsive mais j’en ai besoin pour intégrer des images à 360° ou visites virtuelles mais qui s’adaptent au type d’écran car c’est mon seul élément pas responsive. merci d’avance

    typiquement je voudrais intégrer une iframe comme cette 360 mais que ce soit responsive :

    https://www.google.com/maps/views/view/118312865847673090531/photo/YQP-YhiRWIoAAAQJPJdwjQ?gl=us&heading=22&pitch=90&fovy=75

Laisser un commentaire