Hallo zusammen, ich wiß nicht, warum das Script nicht funktioniert. Bei click auf "Watch Trailer" soll das verborgene Video erscheinen und bei click auf das Kreuz wieder verschwinden. Im Inspector wird die Class active gesetzt.
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="banner">
<div class="content">
<img src="assets/bg.png" alt="">
<h2>Video Popup</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi ullam illum itaque sapiente est corrupti voluptas. Consequuntur saepe ex quaerat possimus eligendi voluptates quod tenetur beatae. Aliquid tenetur ipsum fuga!
</p>
<a href="#" onclick="toggle();">Watch Trailer</a>
</div>
</div>
<div class="trailer">
<video src="assets/trainingskurse.mp4" controls="true"></video>
<img src="assets/close.png" class="close" onclick="toggle();" >
</div>
<script>
function toggle(){
var trailer= document.querySelector(".trailer")
var video= document.querySelector("video")
trailer.classList.toggle("aktive");
video.pause();
video.currentTime = 0;
}
</script>
</body>
</html>Code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.banner{
position: relative;
width: 100%;
min-height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
.banner .content{
max-width: 550px;
}
.banner .content img{
max-width: 100%;
margin-bottom: 15px;
}
.banner .content h2{
color: #fff;
font-weight: 500;
font-size: 2em;
}
.banner .content p{
font-size: 1.2em;
color: #fff;
font-weight: 300;
margin: 15px 0 25px;
}
.banner .content a{
position: relative;
text-transform: uppercase;
background-color: #fff;
color: #111;
font-weight: 500;
letter-spacing: 2px;
text-decoration: none;
display: inline-block;
padding: 10px 15px;
border-radius: 10px;
}
.trailer{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1000;
background-color: rgba(0,0,0,0.95);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 1;
}
.trailer.active{
visibility: visible;
opacity: 0;
}
.trailer video{
position: relative;
max-width: 900px;
outline: none;
}
.close{
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
filter: invert(1);
max-width: 32px;
color: #fff;
}
@media (max-width: 991px){
.trailer video{
max-width: 90%;
}
}