Hoe maak je je video's responsief in WordPress met FitVids

Wanneer je een video insluit in WordPress, werken deze video's standaard niet. Met de opkomst van responsieve WordPress-thema's zien gebruikers die uw site bezoeken op kleinere schermen videobakken die uitgerekt en onevenredig zijn. In dit artikel laten we u zien hoe u uw video's responsief kunt maken in WordPress met FitVids.

FitVids is een jQuery-plug-in waarmee u uw video instaand kunt maken. Als u het op uw WordPress-site wilt gebruiken, hoeft u alleen de plug-in FitVids voor WordPress te installeren en te activeren. Na activering moet je naar Uiterlijk »FitVids en voer een CSS-selectorklasse in. WordPress voegt automatisch toe .post klasse aan de artikelen, zodat je dat gewoon kunt gebruiken.

Dat is alles, sla uw wijzigingen op en bekijk een voorbeeld van uw site. Je zou het browservenster opnieuw moeten aanpassen om video's te zien die zich dienovereenkomstig aanpassen.

Video-instructies

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

Voeg handmatig FitVids toe om uw video's responsief te maken in WordPress

Als u de plug-in FitVids voor WordPress niet wilt installeren, kunt u de plug-in FitVids jQuery handmatig toevoegen. Het eerste wat u hoeft te doen is de FitVids jQuery-plug-in downloaden en extraheren naar uw computer. Nu moet je de geëxtraheerde uploaden FitVids.js-meester map naar de js-map van uw thema.

U moet verbinding maken met uw website met behulp van een FTP-client zoals Filezilla en uw themadirectory openen. Het is mogelijk dat uw WordPress-thema geen js-map heeft. Als dit niet het geval is, moet u er een maken en vervolgens de map FitVids.js-master uploaden vanaf uw computer.

In de map js moet u een nieuw bestand maken en een naam geven FitVids.js. Bewerk dit bestand en plak deze code erin.

 (functie ($) $ (document) .ready (function () // Target uw .container, .wrapper, .post, etc. $ (". post"). fitVids (););) ( jQuery); 

De bovenstaande code vertelt FitVids om naar te zoeken .post CSS-selectorklasse. Nu je FitVids klaar hebt, is het tijd om javascripts toe te voegen aan je WordPress-thema.

Kopieer en plak eenvoudig de volgende code in uw thema's functions.php het dossier:

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

Als je dat eenmaal hebt gedaan, ben je klaar. Je hebt met succes je WordPress-video's responsief gemaakt.

We hopen dat u dit artikel nuttig hebt gevonden. Voor feedback en vragen kunt u een reactie achterlaten of op Twitter en Google+.