Discussion :

[el_debutanti]

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

[NoSmoking]

Bonjour,

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 :

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
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>

[el_debutanti]

Bonjour noSmoking,
La honte
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
Plus rien n'est centré verticalement.
Pour le display: flex, je suis bien incapable de te dire d'où il sort
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

[NoSmoking]

La honte

Aucune raison

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

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

Code :

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

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

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

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

Code :

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

1
2
3
4
5
élément {
  display: flex;
  align-items: center;
  justify-content: center;
}

répond à cette attente.

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 :

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

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 à

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 :

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

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 !

[el_debutanti]

Bonjour NoSmoking,
Merci d'être aussi patient avec moi
Pour ce qui est de l'Iframe, ça marche impec
Par contre, le texte (figcaption) reste fixé en haut
Je te donne mes nouvelles 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
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

[ProgElecT]

Peut être

Code CSS :

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

1
2
3
figcaption
{
	position: fixed;

ou alors je n'ai pas compris ton besoin.

[el_debutanti]

Bonjour ProgElecT,

Merci pour ta réponse

En

Code :

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

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

[el_debutanti]

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