Recuerde dejar su comentario y/o like, gracias por el apoyo…
Y recuerde que nos especializamos en:
SOPORTE TECNICO Equipos de Cómputo para Empresas
Prestamos servicios de soporte técnico integral para empresas,.donde por una tarifa fija mensual, cubrimos toda su infraestructura de computadores, servidores, redes y periféricos… Trabajamos en 3 niveles: Telefónico, Remoto y Presencial. Además hay un director – líder de proyectos quien realiza auditorias, presenta informes de servicio, soporte predictivo para evitar fallos futuros, etc Asesorías en adquisición de tecnología, hardware y licenciamiento Control y administración de copias de seguridad, backups y nube para garantizar la integridad de los datos de la compañía.
Contáctenos por Whatsapp: 3023730863 y reciba respuesta inmediata!.
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.