Faire passer un bouton "play" en premier plan.

Résolu
chamoismignon Messages postés 18 Date d'inscription lundi 11 novembre 2024 Statut Membre Dernière intervention 2 février 2025 - Modifié par chamoismignon le 28/01/2025 à 09:51
chamoismignon Messages postés 18 Date d'inscription lundi 11 novembre 2024 Statut Membre Dernière intervention 2 février 2025 - 29 janv. 2025 à 15:55

Bonjour,

J'ai dans mon site un slider qui contient une vidéo. Il y a donc des flèches pour aller de gauche à droite, le seul souci, c'est que quand on se trouve sur la vidéo, on ne peut pas faire "play". Le bouton se trouve derrière la flèche et n'est donc pas clickable.

Au cas où, voici les CSS:

.fleche
{
	position:absolute;
	top:50%;
	font-size:8em;
	line-height:1em;
	color:white;
	cursor:pointer;
	z-index: 99999999;
}

.fleche:hover
{
	color:#7a6d58;
}

.droite
{
	right:0;
}

.gauche
{
	left:0;
}

.article
{
	display: block;
	/* initialisé en javascript */
	/*width:25%;
	/* il y a 4 éléments donc 100/4 = 25% */
	/*float:left;
	/**/
}

et le HTML :

Merci pour votre aide, bonne journée ;)

A voir également:

2 réponses

Salut,

1) c'est ce que vous indiquez avec le z-index élevé, donc au dessus du reste.

2) je ne vois pas de HTML mais une capture d'écran.

Une solution simple avec 3 containers côté à côte:

[gauche] flèche gauche[/gauche] [centre]La vidéo[/centre] [droite]flèche droite[/droite]

En supprimant tout placement en 'absolute' (comme ça pas de risque de chevauchement: on garde le flux donc les éléments se suivent de gauche à droite) et en utilisant simplement un pourcentage pour décaler à partir du haut si nécessaire: margin-top:50%;

Sinon si vous avez besoin de placer en position absolu(pourquoi?) vous utilisez un container pour les 3 containers et vous positionnez celui ci en absolu donc le contenant(les 3 containers gauche, centre, droite) garde le flux.

Bref aussi bien le positionnement absolu que vos z-index ne servent à rien à part vous compliquer la vie, apprenez les positionnement plus simple et logique: en absolu ou en relatif on sort du flux donc on doit tout repositionner en se compliquant la vie, chaque élément n'est pas positionné par rapport au précédent mais par rapport à une valeur arbitraire.

Éventuellement un positionnement flottant(float) peut-être avantageux ici mais encore plus simple vous utilisez des comportements en ligne(display: inline; ou display:inline-box;) en donnant des proportions en % pour que l'ensemble de la ligne fasse 100%

exemple:

Gauche=25% de largeur

Centre = 48% de largeur(on garde 2% pour les marges)

Droite =25% de largeur

Total + ou - 100% avec un comportement en ligne cela reste ...en ligne donc

Ou encore plus simple un seul container et 3 éléments avec les mêmes indications de proportions qu'indiquées au dessus:

#fleche-gauche{width: 25%}

#fleche-droite{width: 25%}

#video{display:inline-block; wdth:48%;}

Bien sûr il reste un soucis si vous voulez pouvoir mettre la vidéo en plein écran les flèches gauche droite disparaîtront. Pensez en grille alors en sachant que le bas de la "grille" correspond au bouton du lecteur.

Autre solution vous supprimez simplement les boutons du lecteur vidéo pour les recréer à la main: ce qui obligera à du JavaScript mais je suppose que c'est déjà le cas si les flèches correspondent à différentes commandes de navigation d'une liste de lecture?

Ce qui ressemblerait à ça

Bandeau de Navigation vidéo(toujours au dessus là un z-index élevé peut servir voire un placement en absolu)

= bouton vidéo précédente, play/pause, bouton vidéo suivante, volume.

Vidéo avec les controls = false

1
chamoismignon Messages postés 18 Date d'inscription lundi 11 novembre 2024 Statut Membre Dernière intervention 2 février 2025 1
29 janv. 2025 à 15:55

Salut Totogro,

Merci beaucoup pour ta longue réponse très enrichissante (je ne suis pas une brute niveau code :/ J'ai encore une fois beaucoup appris ;)

Malheureusement, impossible de positionner les flèches (j'ai tout essayé). Cela doit être dû à la "construction" du slider généré en javacript dont voici le script :

<script>
// les liens doivent être ordonnés
$(function () {
  var listLien = $('#nav a'),
      enCours  = 0,
      oSlide   = $('#slide'),
      lstSlide = oSlide.children(),  // $('#slide div')
      nbrSlide = lstSlide.length;
 
  // affectation dynamique du CSS
  oSlide.css(
    { 'width':(100 *nbrSlide) +'%',
      'position': 'relative'
    });
  lstSlide.each( function(){
    $(this).css(
      { 'width': 100/nbrSlide +'%',
        'float': 'left'
      });
  });
 
  // fct de déplacement commune
  function moveSlide(pos){
    // déplacement conteneur
    oSlide.animate({
        'left': ( -pos *100) +'%'
      }, 'slow');
     // mémorise position en cours
     enCours = pos;
     // affichage ou non des fléches
     $('.gauche')[enCours === 0 ? 'hide' : 'show']('slow');
     $('.droite')[enCours === nbrSlide-1 ? 'hide' : 'show']('slow');
  }
 
  // gestion des clics sur les liens
  listLien.on( 'click', function(){
    // déplace le conteneur à la position de l'ancre
    moveSlide( listLien.index(this));
    // inibe le lien
    return false;
  });
 
  // gestion des clics sur les flèches
  $('.fleche').on('click',function(){
    var inc  = $(this).hasClass('droite') ? 1 : -1,   // incrément suivant cas
        next = enCours + inc;
    // si déplacement autorisé
    if( next > -1 && next < nbrSlide){
      moveSlide( next);
    }
  });
  // uniquement pour l'affichage des fléches
  moveSlide(enCours);
});
</script>

J'ai abandonné car j'ai trouvé une solution aussi simple que stupide : centrer le bouton lecture de la vidéo comme le permet VIMEO.

Dans mon cas, les flèches ne chevauchent plus le bouton qui est donc clickable :D

Encore merci, très sympa de ta part d'avoir pris de ton temps. Bonne fin de journée ;)

0