Faire passer un bouton "play" en premier plan.
Résoluchamoismignon 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
- Jmplancul
- Arrière plan - Guide
- Youtube en arrière plan - Guide
- Passer en azerty - Guide
- Logiciel plan maison gratuit - Télécharger - Architecture & Déco
- Logiciel plan maison gratuit facile - Guide
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
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 ;)