Vídeo Fullscreen Responsive
HTML
Publicado el 5 de Enero del 2022 por Scriptshow (141 códigos)
3.475 visualizaciones desde el 5 de Enero del 2022
Saludos,
HTML5 y CSS3 para hacer un Vídeo Fullscreen Responsive. Un pequeño Script asegura el arranque en diversos dispositivos y navegadores web.
Veamos el código completo:
Espero sea útil.
HTML5 y CSS3 para hacer un Vídeo Fullscreen Responsive. Un pequeño Script asegura el arranque en diversos dispositivos y navegadores web.
Veamos el código completo:
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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>
Espero sea útil.