Videos responsive en WordPress sin plugins ni shortcodes

Escrito el: 6 Septiembre, 2016 por: Rolando en: WordPress

ResponsiveVideo

Cuando estamos creando un nuevo tema Responsive 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 a nivel código es envolver el vídeo en un DIV y darle estilos con CSS manualmente, pero si estamos haciendo un tema para un cliente que no sabe html, sería un poco incomodo para él estar creando codigos html en las páginas o entradas, es por eso que nosotros como programadores tenemos que brindar una solución real para nuestros clientes.

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 tenemos que añadir a nuestra hoja de estilos style.css

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. En ambos casos los dos funcionan a la perfección pero yo recomiendo la primera ya que es la más facil de realizar.

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