CSS - Video Background

 
Vista:
Imágen de perfil de Ivan

Video Background

Publicado por Ivan (3 intervenciones) el 29/08/2017 02:13:50
Al colocar un video como fondo al hacerle el responsive el width:100%, mi video se me vuelve pequeño y no me acepta el height..

Como puedo colocar un video en toda una section y q sea responsive??
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ivan dario

Video Background

Publicado por ivan dario (3 intervenciones) el 29/08/2017 14:39:29
Lo he probado pero no me funciona no se por q?? Cuando lo coloca a tamaño de una pantalla movil el video se vuelve super pequeño







20170829_143654
20170829_143441
20170829_143751
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Video Background

Publicado por ScriptShow (125 intervenciones) el 29/08/2017 21:43:28
Veamos Ivan,

lo que parece quieres hacer, no ofrece dificutad alguna. Estamos en el Foro de CSS, vamos a ello:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
 
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>video background</title>
<style>
body {
margin: 0;
padding: 0;
}
 
#video {
position: fixed;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -10;
visibility: visible;
}
</style>
</head>
<body>
<video id="video" loop autoplay poster="poster.jpg" onload="this.play()">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
<source src="video.webm" type="video/webm" />
</video>
</body>
</html>

Es todo cuanto necesitas de momento. Para las pruebas, utiliza un navegador o dispositivo compatible.

P.D.: Lo que te indica y pregunta xve es importante para entender mejor qué necesitas.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de ivan

Video Background

Publicado por ivan (3 intervenciones) el 29/08/2017 22:19:09
ScriptShow probe con el codigo q dices pero al hacer el navegador pequeño lo q hace es perderse parte del video y lo que yo quiero es q el video se adapte al ancho de la pantalla y aun largo especifico.

ejemplo: www.eva.co que el video se adapta segun el tamañano del dispositivo

si me podeis ayudar os lo agradezco muchisimo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Video Background

Publicado por ScriptShow (125 intervenciones) el 30/08/2017 10:29:46
Esto es lo más parecido y perfecto en CSS, sin perder la proporción del vídeo. Compatible con cualquier pantalla y/o dispositivo existente. Sin complicaciones...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
 
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>video background</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
 
#video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
z-index: -4;
</style>
</head>
<body>
<video id="video" loop autoplay poster="poster.jpg" onload="this.play()">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
<source src="video.webm" type="video/webm" />
</video>
</body>
</html>

Espero haber entendido bien tu comentario.

P.D.: Algunos dispositivos móviles, no realizan el "autoplay" de vídeo, por diversas razones: privacidad, seguridad, contenidos, etc.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar