El repte d’aquesta setmana ha estat aconseguir que els videos es veiessin “una mica més grans” que no pas tal i com els mostrava per defecte des del gestor de vídeos de Visual Composer a WordPress.
De fet, aquesta setmana estem acabant de construir la web del Consorci Administració Oberta de Catalunya i hem incorporat una pàgina d’inici amb molt de vídeo. Vídeos a la capçalera a pantalla completa per mitjà de Revolution Slider que s’activen per mitjà d’un clic. Però també vídeos que per mitjà de Visual Composer es mostren al contingut.
Els vídeos de Visual Composer tenen un petit problema: es mostren de la mida que estan en pantalla. I això no és ben bé el que volem mostrar a la web del Consorci.
Per això hem hagut de buscar una solució. Una solució que ens deixi presentar vídeos de Youtube a WordPress i que es mostrin més grans tan bon punt es comencin a mostrar. I, a més, que siguin fàcils de gestionar.
La nostra investigació
El vídeo es veu de la mateixa mida :(
A DeMomentSomTres no ens agrada quedar-nos en el que és obvi: “WordPress no presenta els vídeos en un fomat bonic”. Que és veritat.
A DeMomentSomTres ens agrada trobar solucions. Per això, tan aviat com el nostre client ens va plantejar que necessitava els vídeos “una mica més grans”, ens ho vam prendre com un repte. Som així.
(Com es fa la icona de posar cara de resignació i encongir les espatlles?)
Així que ens vam posar a buscar en dos àmbits: add ons de Visual Composer per a que ens ho facin i plugins per a fer-ho directament.
Buscàvem alguna solució que ens deixes presentar els vídeos amb una mida més gran i el fons atenuat com fa la llibreria Lightbox.
Després de diversos experiments, algun d’ells pagant, vam arribar a la conclusió que la millor opció per tal de resoldre aquest repte era un component (plugin) de WordPress anomenat WP Video Lightbox.
No vam trobar cap Add on de Visual Composer que valgués la pena. De fet, MemberPlayer ens va seduir prou com per a que ens hi gastessim 18$ que van resultar ser un fracàs en la mesura que només feia el que volíem pels vídeos allotjats a la web.
Com afegir un vídeo a la web
i que es vegi amb Lightbox
Fent servir aquest component hem pogut posar els vídeos per tal que es mostressin com volíem, és a dir, amb el fons atenuat i amb el vídeo sobre imprès.
Per fer-ho, hem usat un shortcode dels que WP Video Lightbox proporciona. En concret, el vídeo que es mostra a la imatge adjunta és el resultat de:
[video_lightbox_youtube video_id="A-g9sUAu5uc" width="640" height="360" auto_thumb=1 alt="Experiència de l'Ajuntament de Manlleu" description="L'Ajuntament de Manlleu treballa per l'implementació de l'administració electrònica des de 2008"]
Els paràmetres utilitzats són:
- video_id: la identificació del vídeo al youtube. Surt just després de v= a la URL en aquesta plataforma de vídeos per internet.
- width: amplada en píxels del vídeo quan es visualitzi.
- height: altura en píxels del vídeo quan es mostri en Lightbox.
- auto_thumb: si el seu valor és 1 es generarà automàticament una imatge a partir del vídeo.
- alt:text que apareixerà si no es pot visualitzar la imatge i també com a títol de la pantalla en Lightbox.
- description: text que apareix al peu del video en Lightbox explicant de què tracta.
No tot són meravelles…
El resultat inicial ha estat poc esperançador.
Feia el que volíem però era lleig.
Tristament, no tot és tan bonic com sembla… La imatge destacada del vídeo no és en format 16:9 sinó que incorpora una lletja franja en color negre tan per dalt com per sota.
I per acabar-ho d’arrodonir, sembla que el botó Close no es pugui traduir fàcilment.
També passa, tot i que en el nostre cas no sigui un problema, que si piques alguna de les fletxes vas a parar al següent vídeo de la pàgina.
Però amb CSS quasi tots
els problemes estètics tenen solució…
L’aspecte final del vídeo després d’aplicar CSS
Sense aplicar màgia negra, però sí, una mica de CSS, hem aconseguit que ens quedés prou bé.
Per si et fan falta adjuntem el codi CSS que hem icorporat.
Per la teva seguretat, NO intentís fer-ho sense la supervisió d’un informàtic, desenvolupador web, dissenyador web o una espècie alienígena afí.
El codi css que hem afeig al nostre tema actiu per intentar de desenlletgir la imatge gràfica dels vídeos inserits per mitjà de WP Video Lightbox és el següent:
.wpvl_auto_thumb_box {
overflow: hidden;
height: 200px;
width: 364px;
}
.video_lightbox_auto_anchor_image {
width:100%;
margin-top:-35px;
height:auto;
}
.wpvl_auto_thumb_play {
top:85px;
left:166px;
}
.wpvl_playbutton {
width:33px;
}
Properes passes
Possiblement la propera passa sigui millorar el botó close i fer més fàcil per a l’usuari inserir el seu vídeo.
Per a la segona tasca, ens estem plantejant de definir un custom shortcode a Visual Composer que ens demani tota la informació necessària.
Per que fa al botó de tancar, de moment, son figues d’un altre paner.
I tu, com t’ho fas per inserir vídeos al WordPress i que es presentin en LightBox?
Coneixes alguna alternativa més àgil o més agradable per a l’usuari?