Cargando

Ir a contenido

X
OJO! No creerás lo que la gente está haciendo con su iPhone
ATENCION
Ver Más! Alguien con su iPhone te podría estar escuchando (aun estando bloqueado). Mira cómo lo hacen.

 


jQuery para hacer los videos Responsive

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


Escrito por feb 26 2014 14:32


css-media-queries.jpg



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');
?>
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0


AYUDA A MEJORAR ESTE TUTORIAL!

¿Crees que puedes corregir o mejorar este tutorial? Puedes enviar tu Edición con los cambios que consideres útiles.

0 usuarios han editado este tutorial. ¡Edita y conviértete en un reconocido experto!


Tutoriales Relacionados



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado feb 26 2014 14:32
  •   Actualizado mar 04 2014 14:15
  •   Visitas 1.4K
  •   Nivel
    Profesional