Sinds WordPress 3.0+ kun je YouTube-video eenvoudig in je artikelen insluiten door de URL van de videosite in je teksteditor te plakken. WordPress zal dan de rest werken en de vereiste code invoegen om de video in uw site te embedden. Dit is allemaal geweldig, behalve dat de breedte en hoogte van de ingesloten video wordt voorafgegaan en dat je deze niet kunt wijzigen. Wat kan gebeuren, is dat de video te klein is voor uw thema, of te groot om in het inhoudsgebied te passen. Als u een responsief thema voor uw site gebruikt, zult u merken dat de video niet wordt geschaald als u de grootte van de browser wijzigt en uiteindelijk uw thema verbreekt.

Om te illustreren, is dit wat er gebeurde:

Merk je op dat de video niet de volledige breedte van de inhoudscontainer in beslag neemt?

Merk op dat de video niet schaalt wanneer je de grootte van de browser aanpast en het uit de inhoudcontainer is gegaan en het thema heeft gebroken?

Om dit te verhelpen, moeten we gebruik maken van een script - FitVids - waarmee uw ingesloten video wordt omgezet in een responsive object met volledige breedte en automatisch wordt geschaald wanneer u de grootte van de browser aanpast.

Persoonlijk heb ik het FitVids-script rechtstreeks in het thema geïntegreerd om de overhead van de server te verminderen, maar voor degenen die niet ervaren zijn in codering, is er een plug-in die het voor u kan doen: FitVids voor WordPress.

1. Installeer en activeer de FitVids voor WordPress plug-in.

2. Ga naar "Uiterlijk -> FitVids".

3. Als u er absoluut zeker van bent dat het jQuery-script (van versie 1.6 en hoger) al in uw thema is opgenomen, laat u het veld "Add jQuery" leeg. Als dit niet het geval is, vinkt u het selectievakje naast 'JQuery toevoegen' aan.

4. Het veld "jQuery selector" is een beetje lastig, omdat het voor elke site anders kan zijn. Meestal kunt u bijvoorbeeld het woord " body " (zonder het citaat) in het invoerveld invoeren en het zou moeten werken. Als u echter een specifieke container met video op micro-doelen wilt targeten, kunt u de id / klasse van de container in dit veld plaatsen, bijvoorbeeld: " #video-container ", " #content ", " .entry-content " enz.

Opmerking : de "#" en "." Voor de tekst vertegenwoordigen respectievelijk de "id" en de "klasse" in CSS.

5. Bekijk het bericht nu met een ingesloten video. Je zou zoiets als dit moeten zien:

De video neemt nu de volledige breedte van de inhoudcontainer in beslag

Het wordt automatisch geschaald terwijl u de grootte van de browser wijzigt.

Conclusie

FitVids is een eenvoudig te gebruiken script om uw ingesloten video om te zetten in een responsief object. Probeer het en laat ons weten of dit nuttig voor u is.