Foros del Web » Creando para Internet » HTML »

Video de fondo en HTML5

Estas en el tema de Video de fondo en HTML5 en el foro de HTML en Foros del Web. Buenas, estoy intentando hacer una web en la que se reproduzca un video a pantalla completa de fondo pero no se porque razon no me ...
  #1 (permalink)  
Antiguo 03/02/2015, 09:43
 
Fecha de Ingreso: octubre-2006
Mensajes: 24
Antigüedad: 13 años, 1 mes
Puntos: 0
Video de fondo en HTML5

Buenas, estoy intentando hacer una web en la que se reproduzca un video a pantalla completa de fondo pero no se porque razon no me aparece el video, alguien me puede ayudar?

Lo estoy editando con el programa sublime text 2 (version gratuita) y lo ejecutado en chrome y explorer y nada.

El codigo del index.html es:

Código:
<!doctype html>
<html lang"es">
<head>
	<meta charset="UTF-8">
	<title>Es una plantilla</title>
	<link rel="stylesheet" href="estilos.css">
	<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
	<header>
			<div id="logo">
				Video fullscreen con HTML5
			</div>
	</header>	

	<video id="video1" loop autoplay preload poster="imagenes/poster.png">
			<source scr="videos/video1.mp4" type="video/mp4"/>
			<source scr="videos/video1.webm" type="video/webm"/>
			<source scr="videos/video1.ogv" type="video/ogg"/>
	</video>
</body>
</html>
y el codigo del estilos.css es:

Código:
body{
	margin: 0;
	padding: 0;
}
#video1{
	position: fixed;
	left: 0;
	top: 0;
	min-height: 100%;
	min-width: 100%;
	width: auto;
	height: auto;
	z-index: -10;
	visibility: visible;
}
#logo{
	width: 320px;
	height: 320px;
	margin: 40px auto;
	background: url(imagenes/logo.png) no-repeat rgba(20, 118, 143,.5);
	border-radius: 50%;
	border: 15px solid rgba(255, 255, 255, .2);
	padding: 13px;
	text-indent: -99999px;

}
Muchas gracias.
  #2 (permalink)  
Antiguo 07/02/2015, 02:24
Avatar de LucasAddams  
Fecha de Ingreso: febrero-2015
Ubicación: Argentina
Mensajes: 26
Antigüedad: 4 años, 9 meses
Puntos: 3
Busqueda Respuesta: Video de fondo en HTML5

Nunca se me ocurrió hacer algo así, pero si tuviese que hacerlo, lo haría así:

Código HTML:
 <head>
        <meta charset="EL QUE USES" />
        <link href="./video-1.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <iframe id="video-background" width="560" height="315" src="https://www.youtube.com/watch?v=lPbCq9ol8Pc?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;html5=1&amp;allowfullscreen=true&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
        <div>
            "¡Odio a los blancaaaas!" Luis D'elía
        </div>
    </body> 
También me jugaría con un:
Código HTML:
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false"> 
</body> 
  #3 (permalink)  
Antiguo 09/03/2015, 14:33
 
Fecha de Ingreso: noviembre-2011
Ubicación: Guatemala
Mensajes: 16
Antigüedad: 8 años
Puntos: 0
Respuesta: Video de fondo en HTML5

Te recomiendo utilizar un Plugin de Jquery para que no te de problemas con la compatibilidad.

En lo personal me gusta mucho este plugin http://vodkabears.github.io/vide/

Ahi puedes ver el ejemplo y descargarte el plugin, es facil de usar solo lee las instrucciones.

Saludos.
  #4 (permalink)  
Antiguo 09/03/2015, 15:18
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 5 años
Puntos: 91
Respuesta: Video de fondo en HTML5

algo como esto [email protected] ;)
http://codepen.io/AngelKrak/pen/bNMxxd

Etiquetas: css, html5, imagenes, video
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 02:30.