Cette page est prévue pour ajouter des éventuelles informations complémentaires aux sujets publiés dans le forum Trucs et Astuces, même si des commentaires y ont été ajoutés. Elle fait suite à deux sujets du forum Trucs et Astuces. -----> doc.eklablog.com/lecteur-audio-topic200440 -----> doc.eklablog.com/lecteur-video-topic201002 - 14-12-2023 NOUVELLE POSSIBILITé AJOUTéE EN BAS DE PAGE - --- AUDIO [I]..... ACTIVé PAR JAVASCRIPT[/I] --- -- ** UN EXEMPLE QUI FONCTIONNE ** --, à copier-coller dans une zone source < > pour tester. Plusieurs lecteurs possibles sur la même page, à conditions de dupliquer le tout pour chacun et en remplaçant le chiffre 1 par un n° d'indexation différent (1, 2, 3, etc)
Cliquer sur le titre pour afficher le lecteur
< image éventuelle> annonce_du_titre © crédit
- LE BLOC DE CODE EN COMMUN: - http://atelierduchateau.eklablog.com/-a207304668 ( > > > Cliquer ICI pour voir quelques exemples détaillés ) --- AUDIO (STYLE CSS) --- A priori il n'est pas possible par css d'agir sur le lecteur (forme et couleur noire ou blanche, selon le navigateur utilisé), mais on peut modifier la taille d'affichage (en conservant tous les contrôles) et ajouter un encadrement, pour attirer le regard. Exemple: audio {transform: scale(.8) translateX(-40px) } audio {padding: 15px; background-color: #f0f0ff ; border: 4px solid #ecb11e; } - la première ligne indique comment modifier l'affichage (ici d'un coefficient de 0.8) ; et diminuer de 40px la distance du bord gauche (pour ajuster horizontalement la position réduite). - la seconde ligne, plus habituelle, crée un espace de largeur 15px autour du lecteur ; cet espace sera de couleur #f0f0ff ; avec une bordure continue 4px de couleur #ecb11e Il est également possible de mettre "une ombre ou éclairage diffus" tout autour en ajoutant box-shadow: 0px 0px 50px #bbb; (#bbb pour un ombrage gris) =========== --- VIDEO [I]..... ACTIVé PAR JAVASCRIPT[/I] --- Tous les navigateurs ne sont pas aptes à lire tous les formats d'encodage, la documentation html indique que l'on peut répéter la balise