Siden WordPress 3.0+ kan du enkelt legge inn Youtube-video i artiklene dine ved å lim inn nettadressen til videosiden i tekstredigeringsprogrammet. WordPress vil da fungere resten og sette inn den nødvendige koden for å legge inn videoen på nettstedet ditt. Dette er alt bra, bortsett fra at den innebygde videoens bredde og høyde er prefiks, og du kan ikke endre den. Hva som kan skje er at videoen er for liten til temaet ditt, eller for stort til å passe inn i innholdsområdet. Hvis du bruker et responsivt tema for nettstedet ditt, vil du oppdage at videoen ikke skaleres når du endrer størrelsen på nettleseren og i siste instans bryter temaet ditt.

For å illustrere er dette hva som skjedde:

Legg merke til at videoen ikke tar opp hele bredden av innholdsbeholderen?

Legg merke til at videoen ikke skaleres når du endrer størrelsen på nettleseren, og den gikk ut av innholdsbeholderen og bryter temaet?

For å fikse dette må vi bruke et skript - FitVids - som vil gjøre den innebygde videoen din til et fullbredds responsivt objekt og skaleres automatisk når du endrer størrelsen på nettleseren.

Personlig har jeg integrert FitVids-skriptet direkte inn i temaet for å redusere serverkostnaden, men for de som ikke har erfaring med koding, er det et plugin som kan gjøre det for deg: FitVids for WordPress.

1. Installer og aktiver FitVids for WordPress-plugin.

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

3. Hvis du er helt sikker på at jQuery-skriptet (av versjon 1.6 og nyere) allerede er inkludert i temaet, la feltet "Legg til jQuery" være tomt. Hvis ikke, merk av i boksen ved siden av "Legg til jQuery".

4. Feltet "jQuery selector" er litt vanskelig, fordi det kan være annerledes for hvert nettsted. For de fleste tilfeller kan du bare skrive ordet " kropp " (uten sitat) i inntastingsfeltet, og det skal fungere. Men hvis du ønsker å mikrotikke en bestemt beholder med video, kan du plassere beholderens id / klasse i dette feltet, for eksempel: " #video-container ", " #content ", " .entry-content " etc.

Merk : "#" og "." Foran teksten representerer "id" og "klassen" i henholdsvis CSS.

5. Sjekk ut innlegget med en innebygd video. Du bør se noe slikt:

Videoen tar nå hele bredden av innholdsbeholderen

Den skaleres automatisk når du endrer størrelsen på nettleseren.

Konklusjon

FitVids er et brukervennlig script for å konvertere din innebygde video til et responsivt objekt. Prøv det og gi oss beskjed om dette er nyttig for deg.