Video de fondo en HTML5

loadgo · #1 (**permalink**) 03/02/2015, 09:43

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.

LucasAddams · #2 (**permalink**) 07/02/2015, 02:24

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>

catucux · #3 (**permalink**) 09/03/2015, 13:33

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.

AngelKrak · #4 (**permalink**) 09/03/2015, 14:18

algo como esto amig@ ;)
http://codepen.io/AngelKrak/pen/bNMxxd