Siden WordPress 3.0 + kan du nemt indlejre Youtube-video i dine artikler ved blot at indsætte webadressen på videosiden i din teksteditor. WordPress vil derefter arbejde resten og indsætte den nødvendige kode for at integrere videoen på dit websted. Dette er alt godt, bortset fra at den integrerede videoens bredde og højde er præfikset, og du kan ikke ændre den. Hvad der kan ske, er, at enten videoen er for lille til dit tema eller for stor til at passe ind i indholdsområdet. Hvis du bruger et responsivt tema til dit websted, vil du opdage, at videoen ikke skaleres, når du ændrer størrelsen på browseren og i sidste ende bryder dit tema.

For at illustrere dette er hvad der skete:

Bemærk, at videoen ikke fylder hele bredden af ​​indholdsbeholderen?

Bemærk, at videoen ikke skaleres, når du ændrer størrelsen på browseren, og den gik ud af indholdsbeholderen og bryder temaet?

For at rette op på dette, skal vi bruge et script - FitVids - som vil gøre din indlejrede video til et fuldt bredde-responsivt objekt og automatisk skalere, når du ændrer størrelsen på browseren.

Personligt har jeg integreret FitVids-scriptet direkte ind i temaet for at reducere serverens overhead, men for dem, der ikke har erfaring med kodning, er der et plugin, der kan gøre det for dig: FitVids for WordPress.

1. Installer og aktiver FitVids til WordPress plugin.

2. Gå til "Udseende -> FitVids".

3. Hvis du er helt sikker på, at jQuery-scriptet (i version 1.6 og nyere) allerede er inkluderet i dit tema, skal du afslutte feltet "Tilføj jQuery" tomt. Hvis ikke, skal du markere afkrydsningsfeltet ved siden af ​​"Tilføj jQuery".

4. "JQuery selector" feltet er lidt vanskelig, fordi det kan være anderledes for hvert websted. I de fleste tilfælde kan du bare indtaste ordet " body " (uden citat) i inputfeltet, og det skal fungere. Men hvis du vil mikrere en bestemt beholder med video, kan du placere beholderens id / klasse i dette felt, for eksempel: " #video-container ", " #content ", " .entry-content " etc.

Bemærk : "#" og "." Foran teksten repræsenterer henholdsvis "id" og "klasse" i CSS.

5. Tjek posten med en indlejret video. Du skal se noget som dette:

Videoen tager nu hele bredden af ​​indholdsbeholderen op

Det skaleres automatisk, når du ændrer størrelsen på browseren.

Konklusion

FitVids er et let at bruge script til at konvertere din indlejrede video til et lydhurtigt objekt. Prøv det og lad os vide, om det er nyttigt for dig.