-
check_circle_outlineMódulo 1 | 8 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 11 clases
Sección portada
expand_more-
done_all
Clase 1
9.- Mostrar vídeo
-
done_all
Clase 2
10.- Centrar vídeo
-
done_all
Clase 3
11.- Poster y límites de tamaño
-
done_all
Clase 4
12.- Centrar contenido verticalmente
-
done_all
Clase 5
13.- Trabajando con z-index
-
done_all
Clase 6
14.- Google Fonts
-
done_all
Clase 7
15.- Colocar logo y menú
-
done_all
Clase 8
16.- Bootstrap
-
done_all
Clase 9
17.- Programación en HAML
-
done_all
Clase 10
18.- Terminando navegación, transiciones y hover
-
done_all
Clase 11
19.- Trabajando con Position
-
-
check_circle_outlineMódulo 3 | 7 clases
Sticky Navigation
expand_more -
check_circle_outlineMódulo 4 | 5 clases
Menú con imágenes
expand_more -
check_circle_outlineMódulo 5 | 5 clases
Slider
expand_more -
check_circle_outlineMódulo 6 | 12 clases
Formulario de contacto
expand_more -
check_circle_outlineMódulo 7 | 6 clases
Mapa
expand_more -
check_circle_outlineMódulo 8 | 9 clases
Offline
expand_more -
check_circle_outlineMódulo 9 | 9 clases
Responsive Design
expand_more -
check_circle_outlineMódulo 10 | 4 clases
Deploy
expand_more -
check_circle_outlineMódulo 11 | 1 clases
Retroalimentación de proyecto
expand_more -
check_circle_outlineMódulo 12.-
Examen del curso
expand_more-
done_all
Examen
Examen final del curso
-
6 comentario(s)
hola tengo un problema con google chrome que no me reconoce el overflow: hidden , lo digo porque lo probé en firefox y si me funciona alguien sabe porque pasa esto?
Cómo se haría si se quiere colocar el video completo, sin quitar o esconder parte de él?
Saludos a todos..
Saludos a todos..
Imagen --> http://prntscr.com/bofm31 como corrijo este problema para que me cubra todo el ancho de la página?
Sigo todos los pasos pero en el momento que pongo position relative se me queda la pantalla en blanco y deja de mostrar el video, alguien sabe por que? Dejo mis lineas de codigo en css y html por que no se si la pagina permite subir en scss y haml
.video-container{
height:100%;
width:100%;
overflow: hidden;
position:relative;
video{
//cubra toda la pantalla
min-width:100%;
min-height:100%;
//el navegador no altere la escala
width:auto;
height:auto;
//centrarlo
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
}
.video-container {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
!!!5
%html{class:"no-js", lang:"es"}
%head
%meta{charset:"utf-8"}
%title La mejor comida en mi Restaurante
%meta{name:"description", content:"come rico en el mejor restaurante de la ciudad, servicio de primera"}
%link{rel:"stylesheet", href:"css/normalize.css"}
%link{rel:"stylesheet", href:"css/gridlex.min.css"}
%link{rel:"stylesheet", href:"css/style.css"}
%meta{name:"viewport", content:"width=device-width, initial-scale=1"}
%script{src:"js/vendor/modernizr-2.8.3.min.js"}
%body
="<!--[if lt IE 8]>"
%p{class:"browserupgrade"}
Estás usando un navegador
%strong desactualizado.
Por favor
%a{href:"http://browsehappy.com/"}
actualiza tu navegador
para una mejor experiencia
="<![endif]-->"
.video-container
%video{autoplay:true,loop:true, width:"1280",height:"720", poster:"videos/images/bbq.jpg"}
%source{src:"videos/mp4/bbq.mp4",typ:"video/mp4"}
%source{src:"videos/webm/bbq.webm", typ:"video/webm"}
<!DOCTYPE html>
<html class='no-js' lang='es'>
<head>
<meta charset='utf-8'>
<title>La mejor comida en mi Restaurante</title>
<meta content='come rico en el mejor restaurante de la ciudad, servicio de primera' name='description'>
<link href='css/normalize.css' rel='stylesheet'>
<link href='css/gridlex.min.css' rel='stylesheet'>
<link href='css/style.css' rel='stylesheet'>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<script src='js/vendor/modernizr-2.8.3.min.js'></script>
</head>
<body>
<!--[if lt IE 8]>
<p class='browserupgrade'>
Estás usando un navegador
<strong>desactualizado.</strong>
Por favor
<a href='http://browsehappy.com/'></a>
actualiza tu navegador
para una mejor experiencia
</p>
<![endif]-->
<div class='video-container'>
<video autoplay height='720' loop poster='videos/images/bbq.jpg' width='1280'>
<source src='videos/mp4/bbq.mp4' typ='video/mp4'>
<source src='videos/webm/bbq.webm' typ='video/webm'>
</video>
</div>
</body>
</html>
He mirado el video varias veces y sigue sin funcionarme! Se me ve muy chiquito!
https://drive.google.com/file/d/0ByAsyuXt3ya1N19GZVZCOXVlRGM/view?usp=sharing
https://drive.google.com/file/d/0ByAsyuXt3ya1LWY2dGR6OGE3T0k/view?usp=sharing
https://drive.google.com/file/d/0ByAsyuXt3ya1N19GZVZCOXVlRGM/view?usp=sharing
https://drive.google.com/file/d/0ByAsyuXt3ya1LWY2dGR6OGE3T0k/view?usp=sharing
Clase 11