Figcaption et video YOUTUBE

Bonjour !

Je souhaiterais mettre une figcaption lors du ::hover sur mes vidéos YOUTUBE, mais voilà, contrairement aux photos, je n’y arrive pas

Mon HTML : `<div class="video-container"> <figure class="image2">

<iframe src="https://www.youtube.com/embed/msizPweg3kE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen> <figcaption> <strong>TEXTE</strong> </figcaption> </figure></iframe> </div>`

Merci et bon après-midi

P.

Ta balise iframe est mal imbriquée :

<div class="video-container">
  <figure class="image2">
    <iframe src="https://www.youtube.com/embed/msizPweg3kE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen></iframe>
    <figcaption> <strong>TEXTE</strong> </figcaption> 
  </figure>
</div>

C’est pas plutôt comme ça, non ?

Pour le hover, ça dépend, quel est ton CSS ?

Salut Big-Blob, La vidéo n’apparît plus.

A cause de mes CSS ?

`.image2{float:right;margin-right:0vw;margin-left: 0;width:100%;height:auto;} .video-container { position: relative; padding-bottom: 56.25%; margin-top: 1em; }

.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }`

Merci

Pour afficher du code, utilises les trois guillemets ``` suivis du nom du langage (css, dans ton cas). Cela donne ici :

.image2 {
   float: right;
   margin-right: 0vw;
   margin-left: 0;
   width: 100%;
   height: auto;
}

.video-container { 
   position: relative; 
   padding-bottom: 56.25%; 
   margin-top: 1em; 
}

.video-container iframe { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
}

Pardon Je pensais l’avoir fait

Hello !!!!

Une idée ?

Bonne journée

P.

Je n’arrive pas à voir ce que tu veux faire. Tu voudrais afficher une figcaption lorsque le curseur de la souris survole l’iframe, c’est ça ?

Si oui, alors, je ne sais pas si c’est la meilleur méthode, mais le script suivant fonctionne (avec un petit effet de transition sympa) :

  const figcaption = document.querySelector('figcaption')
  const iframe = document.querySelector('iframe')

  iframe.addEventListener('mouseenter', () => { figcaption.style.opacity = 1 });
  iframe.addEventListener('mouseleave', () => { figcaption.style.opacity = 0 });

…sans oublier le css :

  figcaption {
    opacity: 0;
    transition-duration: .2s;
  }

Tu peux très bien utiliser visibility: hidden ou display: none à la place de opacity. Il y a peut-être moyen de faire cela seulement en CSS ceci-dit.

EDIT : et oui, en CSS pur, tu peux faire un truc comme ça :

iframe:hover + figcaption { opacity: 1 }

Mieux vaut privilégier le CSS au JS quand on peut.

Salut Big-Blob,

Ça ne fonctionne pas chez moi

Mon HTML ???

<div class="video-container">
 <iframe
    src="https://www.youtube.com/embed/ZJgVWVxkbC4"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope;"
    allowfullscreen></iframe> <figure><figcaption>texte</figcaption></figure>
</div>

Merci beaucoup ;)

Normal, vu que tes sélecteurs sont imbriqués différemment (le figure en l’occurence).

tu l’imbriques comment ? Désolé pour cette question mais il me semble avoir tout essayé

J’avais écris plus haut :

Cela fonctionne bien avec ce code.

En effet, le symbole + dans la ligne suivante :

iframe:hover + figcaption { opacity: 1 }

signifie que la balise figcaption doit être située juste après de la balise iframe. Or, dans ton code, ton figcaption est situé au sein de la balise figure et n’est donc pas situé "à côté".

Ceci-dit, est-il sémantiquement correct d’imbriquer un iframe au sein d’une balise figure ? apparement oui.

Non, la vidéo disparaît justement

Mes CSS :

figcaption {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 5px;
  cursor: pointer;
  vertical-align: middle;
  color: white;
  background-color : rgba(0,0,0,0.5);
  padding-top: 20%;		font-family: 'ralewayblack', Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
   opacity: 0;
   transition: opacity 1s ease;
	font-size:0.9em;
	line-height:1.1em;
	padding-left: 0.5em;
	padding-right: 0.5em;
    transition-duration: .2s;
  }
iframe:hover + figcaption { opacity: 1 }

Merci à toi

Hmmm, ça doit venir de ton position: absolute, de mon côté ça fonctionne sans. Il faudrait que tu règles tes top, left, right et bottom pour ne pas que le figcaption se barre de l’écran.

Ceci-dit, esthétiquement, j’ai un peu du mal à voir où tu souhaites aller.

Nan Nan Même en relative… pas de vidéo

Peux-tu me partager ton code ? Parrce qu’im me semble avoir tout essayé.

Merci et bon après-midi

PS : une légende pour la video, comme une figcaption sur une photo. L’objectif est là

Le problème vient du positionnement de figcaption avec top, left, bottom, et right.

EDIT : ah mais tu parles de la vidéo qui ne s’affiche pas ? Ou du figcaption ?

Salut Big-Blob,

C’est la vidéo qui n’apparaît pas

Bonne journée

Bonjour Big-Blob,

Ne trouvant pas d’issue, j’ai préféré faire une pose sur ce problème pour mieux y revenir après (donc aujourd’hui) avoir fait le ménage dans mon code

Je ne sais pas d’où venait le problème mais, mais ton aide a été précieuse pour le résoudre.

Tout fonctionne nickel… c’est PAR-FAIT !!!!!

Merci beaucoup, bon week-end,

P.

Pardon, le figcaption est bien présent, mais on ne peut plus faire play. La vidéo n’est plus cliquable

SOS

Merci

Normal, ton figcaption passe au-dessus de la vidéo. Il bloque donc l’accès à l’iframe.

Tu as donc deux choix :

1. rendre ton figcaption non réactif aux événement de souris (sélection, clic, etc.) via pointer-events: none;
2. ne pas le positionner au-dessus de l’iframe

Bonjour viki53

Je ne connaissais pas ```css pointer-events: none;

C'est SUPER !!!! 


Merci beaucoup, bonne journée,

P.