Come rendere i tuoi video reattivi in ​​WordPress con FitVids

Quando incorpori un video in WordPress, per impostazione predefinita questi video non rispondono. Con l'aumento dei temi reattivi di WordPress, gli utenti che visitano il tuo sito su schermi più piccoli vedranno i contenitori video allungati e sproporzionati. In questo articolo, ti mostreremo come rendere i tuoi video reattivi in ​​WordPress con FitVids.

FitVids è un plugin jQuery che ti consente di rendere il tuo video più reattivo. Se vuoi usarlo sul tuo sito WordPress, allora tutto ciò che devi fare è installare e attivare FitVids per il plugin WordPress. Dopo l'attivazione, devi andare a Aspetto »FitVids e inserisci una classe di selettori CSS. WordPress aggiunge automaticamente .inviare classificare gli articoli, quindi puoi semplicemente usarli.

Questo è tutto, salva le tue modifiche e visualizza l'anteprima del tuo sito. Dovresti ridimensionare la schermata del browser per vedere i video che si adattano di conseguenza.

Video Tutorial

Se il video non ti piace o hai bisogno di ulteriori istruzioni, continua a leggere.

Aggiungi FitVids manualmente per rendere i tuoi video reattivi in ​​WordPress

Se non si desidera installare il plug-in FitVids per WordPress, è possibile aggiungere manualmente il plugin jQuery FitVids. La prima cosa che devi fare è scaricare ed estrarre il plugin jQuery di FitVids sul tuo computer. Ora devi caricare l'estratto FitVids.js-master cartella nella directory js del tuo tema.

Devi connetterti al tuo sito web usando un client FTP come Filezilla e apri la directory dei temi. È possibile che il tuo tema WordPress non abbia una cartella js. Se non è presente, è necessario crearne uno e quindi caricare la cartella FitVids.js-master dal computer.

All'interno della cartella js, devi creare un nuovo file e nominarlo FitVids.js. Modifica questo file e incolla questo codice al suo interno.

 (function ($) $ (document) .ready (function () // Scegli come target i tuoi .container, .wrapper, .post, ecc. $ (". post"). fitVids (););) ( jQuery); 

Il codice sopra dice FitVids da cercare .inviare Classe selettore CSS. Ora che FitVids è pronto, è ora di aggiungere correttamente javascript nel tuo tema WordPress.

Semplicemente, copia e incolla il seguente codice nel tuo tema functions.php file:

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

Una volta che lo fai, hai finito. Hai reso i tuoi video WordPress reattivi.

Ci auguriamo che tu abbia trovato utile questo articolo. Per feedback e domande non esitare a lasciare un commento qui sotto o unirti a noi su Twitter e Google+.