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.
if(!function_exists(‘video_content_filter’)) {
function video_content_filter($content) {
// busca algún iFrame en la página
$pattern = ‘/<iframe.*?src=».*?(vimeo|youtu.?be).*?».*?</iframe>/’;
preg_match_all($pattern, $content, $matches);
foreach ($matches[0] as $match) {
// iFrame encontrado, ahora lo envolvemos en un DIV …
$wrappedframe = ‘<div class=»flex-video»>’ . $match . ‘</div>’;
// Intercambia el original con el video, ahora encerrado
$content = str_replace($match, $wrappedframe, $content);
}
return $content;
}
// Aplicar a areas de contenido de la página o entrada
add_filter( ‘the_content’, ‘video_content_filter’ );
// Aplicar a los widgets si se quiere
add_filter( ‘widget_text’, ‘video_content_filter’ );
}
El CSS necesario para que funcione la magia, que podremos añadir a nuestra hoja de estilos.
div.flex-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin: 50px 0; /* esto es opcional */
clear: both;
}
div.flex-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
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.