sitio web completo
58 visualizaciones de promedio por día
HTML
(2)134.862 visualizaciones desde el 26 de Noviembre del 2016
Iniciar sesiónCrear cuenta
Crear cuentaCrear cuenta(2)
(15)
(27)(3)
(1)
(15)(2)(10)(9)(19)
(22)
(3)(17)
(16)(4)(10)(3)(7)(3)(1)(5)(4)(3)(7)(5)(1)
(7)
(5)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Screen Video Background</title>
<style type="text/css">
* {
margin:0;padding:0;}html,body {
height:100%;
}body {font-size:16px;
font-family:"Helvetica", sans-serif;
line-height:1.5;
color:#FFFFFF;
}.content {
position:relative;top:28%;
z-index:2;
margin:0 auto;max-width:640px;
text-align:center;
}.video {
position:fixed;top:50%;
left:50%;
z-index:1;
min-width:100%;
min-height:100%;
width:auto;height:auto;-webkit-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}</style>
</head>
<body>
<div class="content">
<h1>Video Full Screen Test</h1>
<p>Este Vídeo Background Responsive se adapta al tamaño de dispositivos y navegadores.</p>
<a href="#">Test</a>
</div>
<video id="video" class="video" muted loop>
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
<source src="video.webm" type="video/webm">
</video>
<script type="text/javascript">
(function() {
var video=document.getElementById("video");
video.addEventListener("canplay", function() {video.play()});
})();
</script>
</body>
</html>
(13)