Apparition d'un lecteur vidéo sur la page

**lucalumpa** · 30/06/2015, 16h51

Bonjour,
Je cherche à faire apparaître, après avoir cliqué sur un lien, un lecteur vidéo sans changer de page, qui peut être férmé à tout moment.
Est-ce que c'est possible juste en CSS3 ou bien il faut que j'aille voir du côté de Jquery, javascript... (je connais pas grand chose en javascript)

merci d'avance.

**NoSmoking** · 30/06/2015, 20h24

Bonjour,
regarde du coté de l'événement onclick et le passage d'un élément de display:none à display:block.

**lucalumpa** · 01/07/2015, 09h15

Merci beaucoup ! je vais regarder ça tout de suite !

**lucalumpa** · 01/07/2015, 10h34

Bon du coup j'ai regardé un peu partout et d'après ce que j'ai compris en Css , 'onclick' est enfaite 'active'. J'ai testé differents code et peut faire passer mon lecteur de display: block à display:none, mais pas l'inverse étant donné qu'il faut partir de display:none, et du coup il n'y a rien pour cliquer.
J'ai une miniature (qui est une image ) mon but est donc de cliquer sur l'image pendant que : display: none pour ensuite grâce à active le faire passer à display:block.

Comment puis-je faire, pour que ma miniature puisse être en quelques sorte le "bouton" qui fera passer mon lecteur de display:none à display:block ?

Merci

Invité · 01/07/2015, 13h45

Bonjour,
commence par nous montrer ton code...

**lucalumpa** · 01/07/2015, 13h58

Ok voilà en gros le code (je l'ai raccourci), HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE html>
<html>
		<head>
				<meta charset="utf-8" />
				<link rel="stylesheet" href="movies.css" />
				<title>Galaxy</title>
 
 
		</head>	
 
	<body>
 
 
<img src='moviestitle.png' class='moviestitle' alt='moviestitle'/>
 
<div class='1stmovie'>
<img src= 'cadre_video.png' class='cadre1' alt='cadre1'/>
<a href='directionlelecteurvideo'><img src= 'miniaturevideo.png' class='movie1' alt='movie1'/></a>
</div>
 
<video id="video1" class="video1" controls
 preload="auto" width="1080" height="720" 
 data-setup="{}">
 <source src="lavideoenquestion.mp4" type='video/mp4'>
 
</video>
	</body>
 
 
</html>

Et le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
.video1
 
{
 
	display:block;
	position:absolute;
	width:50%;
	height:50%;
	background-color: black;
	margin-left:270px;
	margin-top:200px;
 
}
 
 
 
 
.moviestitle
 
{
 
width: 50%;
position:absolute;
 
}
 
.cadre1
 
{
 
	width:70%;
	margin-left: 200px;
	position: absolute;
	margin-top: 100px;
 
}
 
.movie1
 
{
	transition: opacity 1s;
	width:21%;
	margin-left: 504px;
	position:absolute;
	margin-top:271px;
	opacity:0.5;
}
 
.movie1:hover
 
{
 
opacity: 1;
 
}

**lucalumpa** · 01/07/2015, 14h11

En réalité j'ai réussi à le faire, mais a niveau code c'est le gros bordel:

J'ai créer une page qui est exactement la même page que celle où il y'a la vignette mais avec une transparence, est j'ai mis mon lecteur vidéo au-dessus de tout le reste.
Donc quand je clique sur la vignette il me redirige sur une autre page, qui est identique sauf qu'il y'a un lecteur vidéo en plein milieu et ça fait la blague mais si je fait ça pour chaque vidéo sur la page ça risque d'être un gros bordel à la fin ^^