Als je tegenwoordig een WordPress website laat ontwikkelen dan zal deze hoogstwaarschijnlijk responsive worden opgezet. Op die manier kunnen de bezoekers van je website deze op verschillende resoluties en apparaten goed bekijken. Daarnaast worden mobiel vriendelijke websites tegenwoordig hoger gewaardeerd door Google. Het is dan natuurlijk ook fijn als de video’s in je WordPress berichten netjes meeschalen. In dit bericht lees je hoe wij dit binnen WordPress oplossen.
Allereerst is het goed om te weten dat er meerdere oplossingen beschikbaar zijn om video’s in je berichten netjes mee te laten schalen. Zo beschreef mijn collega Leo in zijn weblog “Responsive video’s in WordPress” een eenvoudige oplossing. Naast deze oplossing zijn wij ook erg tevreden over de FitVids.JS oplossing van Chris Coyier en Paravel. Deze oplossing bestaat uit één JavaScript bestandje die automatisch YouTube en Vimeo video’s responsive maakt. Gelukkig via opties zijn ook eenvoudig andere video spelers responsive te maken.
FitVids.JS kan op verschillende manieren geïntegreerd worden in een WordPress thema. Wij maken hiervoor echter gebruik van de web package manager tool Bower. Met Bower kun je eenvoudig bijhouden welke bibliotheken en versies je gebruikt in je webproject. In een JSON-bestand kunnen we definiëren welke bibliotheken een WordPress thema nodig heeft.
bower.json
{
"name": "pronamic-3",
"version": "1.0.0",
"private": true,
"dependencies": {
"bootstrap-sass": "~3.3.3",
"fitvids": "~1.1.0"
}
}
Met de commando bower install kunnen we vervolgens eenvoudig FitVids.JS installeren binnen het WordPress thema. Met behulp van Grunt en de wp_enqueue_script() functie kunnen we vervolgens deze bibliotheken ook daadwerkelijk inladen in een WordPress thema.
Vervolgens kan in een algemeen JavaScript thema bestand de FitVids.JS functie aangeroepen worden. Aangezien de content van WordPress berichten/pagina’s vaak binnen een .entry-content element staan hoeft FitVids.JS zich alleen op deze elementen te richten.
Ik ben benieuwd hoe andere WordPress ontwikkelaars omgaan met het responsive maken van embeds zoals YouTube en Vimeo video’s. Laat daarom gerust een reactie achter of volg ons op Twitter of Facebook.