Poner un video como fondo
Publicado por Jan (7 intervenciones) el 17/06/2018 20:34:21
Buenas comunidad:
Estoy creando una web y quiero poner un video como fondo en el <header>
El caso es que lo he conseguido, pero, para que se vea el botón del menu y el logotipo hace falta ponerle un z-index negativo al iframe.
Esto resulta un problema porque los usuarios no puedes interaccionar con el video.
Me gustaría que alguien me ayudara a hacer que se siga viendo el logotipo y el icono responsive del menu y a la vez, que puedan los usuarios del sitio pausar y interaccionar en general con el video..
Muchas gracias por vuestra ayuda.
HTML5:
CSS3:
Estoy creando una web y quiero poner un video como fondo en el <header>
El caso es que lo he conseguido, pero, para que se vea el botón del menu y el logotipo hace falta ponerle un z-index negativo al iframe.
Esto resulta un problema porque los usuarios no puedes interaccionar con el video.
Me gustaría que alguien me ayudara a hacer que se siga viendo el logotipo y el icono responsive del menu y a la vez, que puedan los usuarios del sitio pausar y interaccionar en general con el video..
Muchas gracias por vuestra ayuda.
HTML5:
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alquiler drones Barcelona | Topcamdrone</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id="showcase">
<div class="fullscreen-bg">
<iframe class="fullscreen-video" src="https://www.youtube.com/embed/VpuXctTBVO4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<nav>
<a href="index.html"><figure><img id="logo" src="media/topca.png" alt="Hello"></figure></a>
<a href="index.html"><img src="media/nav_icon.png" alt="nav icon"></a>
</nav>
</header>
<div class="team">
<h1>Our resources are hand-crafted by our talented team of designers</h1>
<div class="members">
<div class="person">
<img src="media/david_coyle_img.png" alt="profile icon">
<h3>David Coyle</h3>
<p>5 years of Visual Design</p>
</div>
<div class="person">
<img src="media/david_coyle_img.png" alt="profile icon">
<h3>David Coyle</h3>
<p>5 years of Visual Design</p>
</div>
<div class="person">
<img src="media/david_coyle_img.png" alt="profile icon">
<h3>David Coyle</h3>
<p>5 years of Visual Design</p>
</div>
</div>
</div>
<div class="about">
<h1>Each month we create hunderds of resources for you to use in commercial and non-commercial projects</h1>
<div class="icons">
<img src="media/xd_icon.png" alt="Adobe Xd Icon">
<img src="media/sketch_icon.png" alt="SketchApp Icon">
</div>
</div>
<div class="callToAction">
<h1>Sign Up Now</h1>
<a href="#" class="btnFilled">Get Started</a>
</div>
<footer>
<p>All rights reserved. Created by Jan</p>
<div class="footerPages">
<a href="#">Home</a>
<a href="#">Resources</a>
<a href="#">Monthly</a>
<a href="#">Terms</a>
<a href="#">Privacy</a>
</div>
</footer>
</body>
</html>
CSS3:
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/* GLOBAL */* {
margin: 0; padding: 0; border: 0; outline: 0;font-size: 100%;
vertical-align: baseline;
box-sizing: border-box;
}html {font-family: sans-serif;
}body {width: 100%;
}h1 {font-size: 48px;
font-weight: 100;
color: #2B9DFF;
}p {font-size: 16px;
}.btnOutline {
display: block;text-decoration: none;
color: #2B9DFF;
border: 2px solid #2B9DFF;
border-radius: 6px;
width: 175px; height: 53px;line-height: 53px;
text-align: center;
margin-top: 30px;
}.btnFilled {
display: block;text-decoration: none;
color: white;background-color: #2B9DFF;
border-radius: 6px;
width: 175px; height: 53px;line-height: 53px;
text-align: center;
margin-top: 30px;
}/* NAVIGATION *//* Take a look on that - I don't knew this use of the line-height technique */
nav {
line-height: 150px;
text-align: right;
}
nav a {
text-decoration: none;
color: #202427;
font-size: 20px;
font-weight: 700;
}
nav a:first-child {
float: left;
}
/* Important detail to be known */
nav a img {
vertical-align: middle;
}
nav a figure {
width: 150px;
}
nav a img#logo {
width: 100%;
}
nav a span {
background-color: #2B9DFF;
padding: 5px 15px;
border-radius: 1000px;
font-weight: 1000;
color: white;
margin-left: 7px;
}
/* HEADER */
header {
height: 1000px;
min-height: 1000px;
padding: 0 5%;
}
header h1 {
width: 40%;
margin: 2em 0 0 0;
}
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.fullscreen-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* TEAM */
.team {
text-align: center;
margin: 10em 0 3em 0;
padding: 0 5%;
}
.team h1 {
width: 50%;
margin: 0 auto 30px auto;
}
.members {
display: flex;
justify-content: center;
}
.person {
margin: 0 30px;
color: #202427;
}
.person h3 {
margin-bottom: 5px;
}
/* ABOUT */
Valora esta pregunta
0
