Lorsque vous intégrez une vidéo dans WordPress, ces vidéos ne sont pas réactives par défaut. Avec l'essor 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.

Vidéo intégrée par défaut non réactive et réactive dans WordPress

FitVids est un plugin jQuery qui vous permet de rendre vos intégrations vidéo responsives. Si vous souhaitez l'utiliser sur votre site WordPress, il vous suffit d'installer et d'activer FitVids pour WordPress brancher. Après l'activation, vous devez vous rendre sur Apparence » FitVids et entrez une classe de sélecteur CSS. WordPress ajoute automatiquement .post classe aux articles, vous pouvez donc simplement l'utiliser.

FitVids pour les paramètres du plugin WordPress

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

Abonnez-vous à WPBeginner

Si vous n'aimez pas la vidéo ou 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 manuellement le plugin FitVids jQuery. La première chose que vous devez faire est de télécharger et d'extraire Plug-in FitVids jQuery à ton ordinateur. Maintenant, vous devez télécharger l'extrait FitVids.js-master dossier dans le répertoire js de votre thème.

Vous devez vous connecter à votre site Web à l'aide d'un client FTP tel que Filezilla et ouvrir votre répertoire de thèmes. Il est possible que votre thème WordPress n'ait pas de dossier js. Si ce n'est pas le cas, 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 .post Classe de sélecteur CSS. Maintenant que vous avez préparé FitVids, il est temps d'ajouter correctement des javascripts dans votre thème WordPress.

Simplement, copiez et collez le code suivant dans votre thème functions.php fichier:


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 faites 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 des commentaires et des questions, n'hésitez pas à laisser un commentaire ci-dessous ou à nous rejoindre sur Twitter et Google+.

Laisser un commentaire