Lecture de video impossible avec figcaption

Version imprimable

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:

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:

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

Bonjour,

Citation:

Est-il possible de concilier les deux ?

oui,
pour commencer, <iframesrc> pas sûr que cette balise existe.

Le CSS de ton élément <figcaption> c'est du grand n'importe quoi !!!!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0px;
  bottom: 1000px;        /* !!!!! */
  width: 100%;            /* !!!!! avec left à 0 et right à 0 c'est inutile */
  height: 100%;           /* !!!!! normal donc qu'il recouvre le parent */
  text-align: center;
  color: white;
  background-color: rgba(0,0,0,0.5);
  display: flex;            /*  !!!!!  pourquoi */
  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;
}

et que dire du padding-bottom: 56.25%; sur le parent <figure>

04/04/2023, 17h59
el_debutanti

Bonjour noSmoking,
:oops: La honte :weird:
J'ai bien effectué les changements, mais sans le height: 100%, le texte arrive en tête de la vidéo, avec l'opacité seulement derrière la phrase :weird:
Plus rien n'est centré verticalement.
Pour le display: flex, je suis bien incapable de te dire d'où il sort :roll: :oops:
Pour le padding-bottom: 56.25%, il faut le mettre sur les CSS de l'IFrame, c'est ça ? Pourtant ça fonctionne comme ça l'était, mais autant faire les choses comme il faut... il y a du travail :?
Merci à toi NoSmoking, bonne soirée :)
ED
04/04/2023, 18h51
NoSmoking
Citation:

Envoyé par el_debutanti

:oops: La honte :weird:

Aucune raison ;)

Citation:

J'ai bien effectué les changements, mais sans le height: 100%, le texte arrive en tête de la vidéo, avec l'opacité seulement derrière la phrase :weird:

pour qu'un élément occupe tout l'espace de son parent, on peut faire simplement :
Code:

1 2 3 4 5 6 7 élément { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
Citation:

Pour le display: flex, je suis bien incapable de te dire d'où il sort :roll: :oops:

Ça c'est quand même dommage, mais effectivement si tu veux centrer cela par rapport au parent ton CSS :
Code:

1 2 3 4 5 élément { display: flex; align-items: center; justify-content: center; }
répond à cette attente.

Citation:

Pour le padding-bottom: 56.25%, il faut le mettre sur les CSS de l'IFrame, c'est ça ? Pourtant ça fonctionne comme ça l'était,...

je te laisse juge, cela ressemble à une vidéo en 16/9, donc
Code:

1 2 3 4 5 iframe { width: 100%; display: block; aspect-ratio: 16 /9; }
sans mettre de padding-bottom sur le conteneur.

Et pour en revenir à

Citation:

Est-il possible de concilier les deux ?

la réponse est oui, il te suffit d'annuler les événement sur l'élément en lui ajoutant :
Code:

1 2 3 élement { pointer-events: none; }
cela ne m'apparaît quand même pas très judicieux, mais c'est toi le patron !

1 pièce(s) jointe(s)

Bonjour NoSmoking,
Merci d'être aussi patient avec moi :)
Pour ce qui est de l'Iframe, ça marche impec :D
Par contre, le texte (figcaption) reste fixé en haut :weird:
Je te donne mes nouvelles CSS :

Code:

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
figcaption
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0px;
	bottom: 0;
	bottom: 1000px;
	text-align: center;
	color: white;
	display: flex;
	background-color : rgba(0,0,0,0.5);
	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;
	pointer-events: none;
}
 
figure:hover figcaption
{
	opacity: 1;
}

Merci encore ;)
ED
Pièce jointe 636919

05/04/2023, 15h11
ProgElecT
Peut être
Code:

1 2 3 figcaption { position: fixed;
ou alors je n'ai pas compris ton besoin.
05/04/2023, 15h18
el_debutanti

Bonjour ProgElecT,

Merci pour ta réponse :)

En

Code:

position: fixed;

, la figcaption "sort" de la vidéo pour se mettre en haut de l'écran (top: 0).

Je souhaiterais qu'il ce centre à l'intérieur de l'Iframe. Je ne suis pas loin, je suis certain ;)

Bon aprèm,

ED
06/04/2023, 10h43
el_debutanti

Bonjour,
J'ai tout recommencé à 0. Désolé de vous avoir relancés, ça fonctionne !!!!!!
SUPER !!!!!
MERCI et bonne journée !
:zoubi: