Bonjour,
J'ai rajouté une figcaption à une vidéo mais voilà, elle couvre le bouton play de la vidéo. On ne peut donc plus la lire.
Est-il possible de concilier les deux ?
Je vous laisse le HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<div class= "jefferson">
	<figure class="video-responsive">
		<iframesrc="https://www.youtube.com/embed/jpYH0s1MgPk"allow="accelerometer; autoplay; encrypted-media; gyroscope;"></iframe>
		<figcaption>
			<strong>TEXTE</strong>
		</figcaption>
	</figure>
</div>
et les 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
56
.jefferson
{
	width: 60%;
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 3em;
}
 
.video-responsive
{
	overflow:hidden;
	padding-bottom:56.25%;
	position:relative;
	display: block;
	margin: auto;
	min-width: 60%;
}
 
figure
{
	position: relative;
	display: inline-block;
	overflow: hidden;
	margin: 0;
}
 
figcaption
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0px;
	bottom: 1000px;
	width: 100%;
	height: 100%;
	text-align: center;
	color: white;
	background-color : rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease-in;
	padding-left: 1em;
	padding-right: 1em;
	font-family: 'ralewayblack', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-size:1.2em;
	line-height:1.2em;
}
 
figure:hover figcaption
{
	opacity: 1;
}
Merci beaucoup pour votre aide ^^
Bonne journée,
ED