Bonjour
J'ai suivi un tutoriel car je voulais intégrer une vidéo en pop up dans mon site
Normalement lorsqu'on appuie sur le bouton lecture, la vidéo doit apparaitre et doit avoir les fonctionnalités css :
"visibility : visible;
opacity : 1;"
Cependant cela ne fonctionne pas. Lorsque j'appuie sur le bouton play, la vidéo est toujours en arrière plan. Lorsque j'inspecte le CSS avec l'inspecteur de l'élément la vidéo a toujours les propriétés :
"visibility : hidden;
opacity : 0;"
Pourtant le javascript semble fonctionner puisque quand je cliquer sur le bouton play, la section trailer passe en trailer .active. Je ne vois vraiment pas d'ou viens le problèmes. Pensez-vous avoir une solution pour m'aider ?
Voici mon code :
<!DOCTYPE hml>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Famille Mauran</title>
<style>
</style>
</head>
</html>
J'ai suivi un tutoriel car je voulais intégrer une vidéo en pop up dans mon site
Normalement lorsqu'on appuie sur le bouton lecture, la vidéo doit apparaitre et doit avoir les fonctionnalités css :
"visibility : visible;
opacity : 1;"
Cependant cela ne fonctionne pas. Lorsque j'appuie sur le bouton play, la vidéo est toujours en arrière plan. Lorsque j'inspecte le CSS avec l'inspecteur de l'élément la vidéo a toujours les propriétés :
"visibility : hidden;
opacity : 0;"
Pourtant le javascript semble fonctionner puisque quand je cliquer sur le bouton play, la section trailer passe en trailer .active. Je ne vois vraiment pas d'ou viens le problèmes. Pensez-vous avoir une solution pour m'aider ?
Voici mon code :
<!DOCTYPE hml>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Famille Mauran</title>
<style>
*{
margin : 0;
padding : 0;
box-sizing: border-box;
font-family : 'Arial', sans-serif;
}
.banner {
position : relative;
width : 100%;
min-height : 100vh;
padding : 0 100px;
background : url(../Images/FRAD031_00090_FI_001162.jpg);
background-position : center;
background-size : cover;
display : flex;
justify-content: flex-start;
align-items : center;
}
.banner .content{
max-width : 550px;
}
.banner .content h1{
font-weight : 400;
font-size : 50px;
letter-spacing: 0.1em;
color : #fff;
}
.banner .content h1 span{
font-weight : 800;
}
.banner .content p {
font-size : 17px;
font-weight : 300;
letter-spacing : 0.02em;
line-height: 1.5em;
color : #fff;
margin : 15px 0 35px;
}
.play {
position : relative;
display : inline-flex;
justify-content : flex-start;
align-items : center;
color : #fff;
text-transform : uppercase;
font-weight: 500;
text-decoration : none;
letter-spacing: 2px;
font-size : 1.2em;
}
.play img {
margin-right : 10px;
max-width: 50px;
}
.slide {
position : absolute;
bottom : 50px;
left : calc(50% - 250px / 2);
width : 250px;
height : 150px;
background : url(joker.png);
background-size: cover;
cursor : pointer;
animation : animate 25s linear infinite;
}
@keyframes animate {
0%,100%{
background-position : top;
}
45%,55%{
background-position : bottom;
}
}
.trailer {
position : fixed;
top : 50%;
left: 50%;
transform : translate(-50%, -50%);
z-index : 10000;
background : rgba(0,0,0,0.95);
width : 100%;
height : 100%;
display : flex;
justify-content: center;
align-items: center;
visibility : hidden;
opacity : 0;
}
.trailer .active {
visibility : visible;
opacity : 1;
}
.trailer video {
max-width: 900px;
outline: none;
}
.trailer .close {
position : absolute;
top : 30px;
right : 30px;
cursor : pointer;
filter : invert(1);
max-width : 32px;
}
</style>
</head>
<body>
<div class="banner">
<div class="content">
<h1>La Famille <span>Mauran</span></h1>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.</p>
<a href="#" class="play" onclick="toggle();"><img src="play.png">Regardez la vidéo</a>
<div class="slide"></div>
</div>
</div>
<div class="trailer">
<video src="Extrait d'une vie la Famille Mauran.mp4" controls="true"></video>
<img src="close.png" class="close" onclick="toggle();">
</div>
<script type="text/javascript">
function toggle() {
var trailer = document.querySelector('.trailer');
trailer.classList.toggle('active')
}
</script>
</body>
</html>