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 réactives par défaut. Avec la montée des thèmes WordPress réactifs, les utilisateurs visitant votre site sur des écrans plus petits verront des conteneurs vidéo étirés et démesurés. Dans cet article, nous allons vous montrer comment rendre vos vidéos réactives dans WordPress avec FitVids..

FitVids est un plugin jQuery qui vous permet de rendre vos vidéos intégrées sensibles. Si vous souhaitez l'utiliser sur votre site WordPress, il vous suffit d'installer et d'activer le plug-in FitVids for WordPress. Après l'activation, vous devez aller à Apparence »FitVids et entrez une classe de sélecteur CSS. WordPress ajoute automatiquement .poster classe aux articles, de sorte que vous pouvez simplement utiliser ce.

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 plug-in FitVids for WordPress, vous pouvez ajouter le plug-in FitVids jQuery manuellement. La première chose à faire est de télécharger et d’extraire le plug-in FitVids jQuery sur votre ordinateur. Maintenant, vous devez télécharger les extraits 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 à partir de votre ordinateur..

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

 (function ($) $ (document) .ready (function () // Cible votre conteneur., .wrapper, .post, etc. $ $ "," post "). fitVids ();) ( jQuery); 

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

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

 wp_enqueue_script ('fitvids', get_template_directory_uri (). '/js/FitVids.js-master/jquery.fitvids.js', tableau ('jquery'), ", VRAI); wp_enqueue_script (fitvids-xtra ') . '/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 vos commentaires et questions, n'hésitez pas à laisser un commentaire ci-dessous ou à nous rejoindre sur Twitter et Google+.