Cargando

Ir a contenido

X


Ver Más! Si te gusta crear vídeos con tus mejores fotos o montajes de vídeos en DVD o Blu-ray, Wondershare DVD Creator es tu programa. Haz clic en el enlace, conoce todo lo que ofrece y cómo usarlo.


 


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 el 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

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 1K
  •   Nivel
    Profesional