Comment rendre vos vidéos réactives dans WordPress avec FitVids

---

Lorsque vous intégrez une vidéo dans WordPress, ces vidéos ne sont pas responsive par défaut. Avec la montée en puissance des thèmes WordPress réactifs, les utilisateurs visitant votre site sur des écrans plus petits verront des conteneurs vidéo étirés et disproportionnés. Dans cet article, nous allons vous montrer comment rendre vos vidéos responsives dans WordPress avec FitVids.

FitVids est un plugin jQuery qui vous permet de rendre vos vidéos intégrées réactives. Si vous souhaitez l'utiliser sur votre site WordPress, il vous suffit d'installer et d'activer le plugin FitVids pour WordPress. Après l'activation, vous devez accéder à Apparence » FitVids et entrer une classe de sélecteur CSS. WordPress ajoute automatiquement la classe .post aux articles, vous pouvez donc simplement l'utiliser.

C'est tout, enregistrez vos modifications et prévisualisez votre site. Vous devrez redimensionner l'écran du navigateur pour voir les vidéos s'ajuster en conséquence.

Didacticiel vidéo

Si vous n’aimez pas la vidéo ou si vous avez besoin de plus d’instructions, continuez à lire.

Ajoutez manuellement FitVids pour rendre vos vidéos réactives dans WordPress

Si vous ne souhaitez pas installer le plugin FitVids pour WordPress, vous pouvez ajouter le plugin FitVids jQuery manuellement. La première chose que vous devez faire est de télécharger et d’extraire le plugin FitVids jQuery sur votre ordinateur. Vous devez maintenant télécharger le dossier FitVids.js-master extrait dans le répertoire js de votre thème.

Vous devez vous connecter à votre site Web à l'aide d'un client FTP comme Filezilla et ouvrir votre répertoire de thèmes. Il est possible que votre thème WordPress ne possède pas de dossier js. S'il n'y est pas, vous devez en créer un, puis télécharger le dossier FitVids.js-master depuis votre ordinateur.

Dans le dossier js, vous devez créer un nouveau fichier et le nommer FitVids.js. Modifiez ce fichier et collez ce code à l'intérieur.

(function($) {
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $(".post").fitVids();
  });
  
  })(jQuery);

Le code ci-dessus indique à FitVids de rechercher la classe de sélecteur CSS .post. Maintenant que FitVids est prêt, il est temps d'ajouter correctement des javascripts dans votre thème WordPress.

Copiez et collez simplement le code suivant dans le fichier functions.php de votre thème :

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);

Une fois que vous avez fait cela, vous avez terminé. Vous avez réussi à rendre vos vidéos WordPress réactives.

Nous espérons que vous avez trouvé cet article utile. Pour vos commentaires et questions, n'hésitez pas à laisser un commentaire ci-dessous ou à nous rejoindre sur Twitter et Google+.