El diseño web responsivo o adaptable para diferentes disposititvos, sirve para que nuestros diseños se ajusten perfectamente a cualquier pantalla de dispositivo con conexión a internet.
El uso de media queries en CSS3, permite crear diseños responsivos con CSS3 Media Queries.
Una media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. Añadido en CSS3, las media queries dejan que la presentación del contenido se adapte a un rango especifico de dispositivos de salida sin tener que cambiar el contenido en sí.
Las Media queries consisten de un media type y una o mas expresiones, implicando características del medio, la cual se resuelve como verdadera o falsa. El resultado de la consulta es verdadera si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo mostrado y todas las expresiones en el media query son verdaderas. Cuando una media query es verdadera, la hoja de estilo correspondiente o reglas de estilos son aplicadas, siguiendo las reglas normales de cascada.
<!-- CSS media query para resolucion maxima de 800px -->
<link rel="stylesheet" media="(max-width: 800px)" href="eestilos.css" />
<!-- CSS media query para resolucion maxima de 480px -->
<style>
@media (max-width: 480px) {
.facet_sidebar {
display: none;
}
}
</style>Esta técnica responsive se puede utilizar con todos nuestros archivos de una web aun si el contenido multimedia, para hacer nuestra web mas practica y accesible a todo dispositivo,entonces podemos hacer que nuestros videos también sean Responsive, es decir autoajustable o adaptable según el dispositivo de salida.
Para ello tenemos FitVids.js, este es un plugin sirve para hacer cualquier video responsive, se adaptara perfectamente y automáticamente al tamaño del contenedor o dispositivo de salida, algo muy práctico para el diseño web en cuanto a su contenido para ser perfectamente visualizado en teléfonos inteligentes y tabletas.
Debes incluir jQuery 1.7 o posterior y FitVids.js en el diseño de tu página web y orientar el contenedor de vídeos con fitVids ().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<style>
.container { max-width:960px; margin:0 auto; }
.vidcontainer { width:80%; margin:0 auto; }
video. iframe {width:100%; height:auto;}
</style>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$(".video").fitVids();
//Contenedor de video
});
</script>
</head>
<body>
<div class="container">
<div class="video">
<iframe src="http://player.vimeo.com/video/sourcenameofvideo" width="800/embed/?moog_width=800" height="450" frameborder="0"></iframe>
</div>
</div>
</body>
</html>El uso es sencillo, basta con llamar a la función fitVids apuntando un video y el elemento es auto-envuelto con una <div> y CSS para cambiar el tamaño se va a aplicar.
Actualmente, es compatible con los principales servicios como Youtube, Vimeo, Blip.TV o Viddler
Podemos añadirlo a wordpress con una función, para que cualquier div clase .video se redimensione automaticamente.
<?php
// Funcion par añadir librería fitvid
function fitvids() {
if (!is_admin()) {
wp_register_script( 'fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array('jquery'), '1.0', true);
wp_enqueue_script( 'fitvids');
function redimensiona_video() { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.video').fitVids();
});
</script>
}
}
}
}
add_action('init', 'fitvids');
?>
