Con la llegada de HTML 5 y sus nuevas etiquetas se pueden crear fácilmente paginas web con contenido multimedia que antes solo era posible mediante un plugin de flash. Aquí os dejo un ejemplo en el que se reproduce un vídeo HD como fondo de una pagina web.
El vídeo utiliza la etiqueta <video> de HTML 5 y el resto son estilos.
El código de la página:
<!DOCTYPE HTML>
<html>
<head>
<title>Web con un video de fondo</title>
<style type="text/css" media="screen">
body{
margin:0px;
background-color: #000000;
}
#contenedor{
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
}
#video{
width:1280px;
height:720px;
position:absolute;
align-vertical:middle;
top: 50%;
left: 50%;
margin-left: -640px;
margin-top: -360px;
}
#cuadro{
position:absolute;
width:400px;
height:300px;
background: rgba(0,0,0,0.50);
border: 1px solid rgba(255,255,255,0.75);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
top:50%;
left:50%;
margin-left: -200px;
margin-top: -150px;
padding: 40px;
}
.clearBoth{
clear:both;
}
h1,h2,p {
color: white;
}
h2.right{
float:right;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="video">
<video src="video.mp4" width="1280px" height="720px" autoplay="autoplay" loop="loop">
</video>
<br class="clearBoth">
</div>
<div id="cuadro">
<h1>Web con un video de fondo</h1>
<p>
Esto es una demostración de lo que la etiqueta <video> de HTML5 puede hacer. En este caso tenemos de fondo un video en HD.<br/>El codigo es muy sencillo:</p><p>
<code>
<video src="video.mp4" width="1280px" height="720px" autoplay="autoplay" loop="loop">
</video>
</code>
</p>
<p>Y todo lo demas CSS.</p>
<h2 class="right">http://trombotic.blogspot.com/</h2>
</div>
</div>
</body>
</html>
oye esta excelente y para que el video sea el total de la pantalla que hay que cambiar en el codigo, muchas gracias
ResponderEliminarAmigo, y en el caso de que se vea en dispositivo móvil como los smartphones como sería
ResponderEliminarEstimados amigos, en mi web podeis bajar gratis los videos ya optimizados en formatos webM y mp4. Perfectos para el fondo (background) de vuestras paginas web.
ResponderEliminarhttp://yapa.es