Vídeos Responsive en WordPress automáticamente sin plugins ni shortcodes

responsive-videos

Cuando estamos haciendo un tema Responsive Design para WordPress, un problema con el que nos encontramos son los vídeos incrustados. Por defecto si no creamos estilos para ello, los vídeos tienen un ancho fijo que nos romperá el diseño adaptable.

Una solución es envolver el vídeo en un DIV y darle estilos con CSS, pero si estamos haciendo un tema para un cliente que no sabe html, por mantener nuestras entradas limpias de código o por simple comodidad, a veces no nos interesa tener que envolver en un div manualmente cada vídeo que publiquemos.

Para solucionar este problema podemos usar esta función en nuestro functions.php que nos evitará tener que escribir el código de los div en el editor de entradas cuando insertemos un vídeo de Youtube o Vimeo.

El CSS necesario para que funcione la magia, que podremos añadir a nuestra hoja de estilos.

Una vez hecho esto podemos insertar vídeos de dos formas:

Simplemente pegando la url en el editor de entradas o pegando el código embed que nos ofrece Youtube o Vimeo. Yo recomiendo la primera, ya que es la más sencilla y funciona a la perfección.

Automáticamente nuestros vídeos estarán envueltos en un div con la clase flex-video.


Visto en FredTheWebChap

¿Te ha sido útil? Compártelo y deja un comentario.