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

Par Aurélien Denis
le 25 juillet 2013, mis à jour il y a 3 mois
24 commentaires
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 Ko  • Hits : 1 335

É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 !

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

Ces tutoriels devraient vous intéresser…
24 commentaires
  1. Yannick

    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

    Répondre
  2. Guy

    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.

    Répondre
    1. Aurélien Denis auteur de l’article

      Il y a une aide dans la documentation officielle relative à l’ajout de votre propre fournisseur. Cela ne devrait pas être trop compliquée. 😉

      Répondre
      1. Guy

        Merci pour le lien, j’ai réussi à l’adapter à mon player 😉

        Répondre
        1. Aurélien Denis auteur de l’article

          Super !

          Répondre
          1. Guy

            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. Aurélien Denis auteur de l’article

            A voir si le code HTML généré est différent ou non. Il est possible que certaines vidéos génèrent un code différent.

  3. Linda

    Merci pour le tuyau ! 🙂

    Répondre
    1. Aurélien Denis auteur de l’article

      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. 😉

      Répondre
  5. Gilles

    Y’a plus simple : vidéo YT = vidéo responsive 🙂

    Répondre
    1. Aurélien Denis auteur de l’article

      Les vidéos YouTube insérées sur ton blog sans script ne seront pas responsive je te le garantis.

      Répondre
      1. Gilles

        Ouch, un défi 🙂

        En fait, je te fais confiance, mais vais tester pour la forme 😉

        Répondre
        1. Gilles

          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…

          Répondre
          1. Aurélien Denis auteur de l’article

            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. 😉

  6. lian00

    Je suis en pleine réflexion “responsive” et voilà un tuto bien intéressant… même si ça signifie un javascript de plus 🙁

    Répondre
    1. Constantin

      Si tu veux optimiser un peu plus la chose, rajoute la condition is_single() pour que le script soit lancer que sur les articles ! 🙂

      Répondre
      1. Aurélien Denis auteur de l’article

        Oui quelques conditions suffisent mais franchement c’est très léger.

        Répondre
    2. Julien Maury (@TweetPressFr)

      @lian00 Dans ce cas il vaut mieux créer un seul fichier js pour tout le site même si certains bout de code seront loadés partout, en termes de performance, 1 fichier, 1 requête.

      Répondre
      1. Aurélien Denis auteur de l’article

        Ce lien été cité plus bas mais n’est pas vraiment une bonne méthode…

        Répondre
  7. Calliframe (@calliframe)

    Exactement ce dont j’avais besoin! Je me posais justement la question récemment et l’excellent wp Channel m’apporte la solution 🙂 happy face!

    Répondre
    1. Aurélien Denis auteur de l’article

      Oui c’est un nouveau service que je développe : anticiper vos questions ! 🙂

      Répondre
Laisser un commentaire