Modifier le background d'un lecteur de musique en i-frame

[d-elirium]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://test-delirium-mv.forumactif.com/

Description du problème

Bonjour,
Je poste aujourd'hui car je ne parviens pas à modifier le background-image ainsi que la box-shadow d'une iframe. il s'agit d'un lecteur mp3 hébergé sur archive-host, et via la console ça semble possible, mais pas en css. ni en l'intégrant dans la balise style de l'iframe.

Code:

<iframe style="margin:-60px 0 0 -560px; position:fixed; z-index:999;" src="https://www.archive-host.com/media/players/audioplayer/index.php?data=aHR0cHM6Ly93d3cuYWh0LmxpLzM3NzA3NzMvU29uX0x1eF9fRmxpY2tlcnNfT2ZmaWNpYWxfQXVkaW8ubXAzfDF8MXxiYXJ8fHww" scrolling="false" allowtransparency="true" frameborder="0" width="328" height="42">www.archive-host.com</iframe>

Savez-vous s'il est tout de même possible d'apporter ces modifications ou si elles ne le sont pas, par défaut?
Cordialement.

[d-elirium]

up.

[Lixyr]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour,

Pour modifier le background du lecteur Media Player, il faut modifier le document .css nommé bar.css.
Normalement, vous avez du l'héberger sur archive host.
Il s'agit de la classe

Code:

#amazingaudioplayer-1 .amazingaudioplayer-bar

, ligne 66.

[d-elirium]

Bonjour @"Lixyr",
J'ai cherché un peu partout sur Archive Host ce fameux fichier bar.css mais comme il s'agit d'une musique hébergée dessus et que j'ai simplement c/c l'iframe permettant de générer un lecteur de musique; je ne sais pas de quelle façon je peux accéder à cette page css pour y apporter les modifications?

[Lixyr]

Bonjour,

Normalement, avec le lecteur Media Player, vous avez du avoir le CSS qui va avec, à héberger vous-même et à mettre sur votre forum pour pouvoir le personnaliser. Vous ne l'avez pas fait ?
Je vois ce chemin, pour le CSS :
https://www.archive-host.com/media/players/audioplayer/js/bar.css
Ce n'est pas le votre ? Sinon il faudrait récupérer le CSS.

Normalement, enfin si vous avez ce qu'il faut, vous avez du enregistrer un dossier sur votre ordinateur, avec tout un tas de fichiers, donc des fichiers JS et CSS. Ce sont ces fichiers CSS que vous devez modifier, héberger vous-même sur Archive-host, et installer sur votre forum.

[d-elirium]

En glissant l'iframe sur mon forum il s'agissait d'un lien direct, je n'ai eu qu'à télécharger ma musique sur mon compte archive host puis je suis allée dans informations & codes > lecteurs de musique > obtenir le code. Après il s'agit d'un abonnement gratuit, se pourrait-il que l'accès au css soit donc limité? Car je ne vois pas de quelle autre façon m'y prendre.

[Lixyr]

Pouvez-vous fournir le lien où vous avez trouvez ce lecteur de musique ?
Il me semble que j'avais utilisé le même mais de ce que vous en dites, ça me met le doute.

[d-elirium]

Oui, bien sûr : https://www.archive-host.com/
Par ailleurs, j'avais suivi ce tutoriel : https://forum.forumactif.com/t255189-heberger-une-musique-sur-archive-host-et-mettre-un-lecteur

[Lixyr]

Bonjour,

D'accord. Donc, effectivement, vous utilisez un lecteur audio non personnalisable.
Dans ce cas, je me permets de vous proposer un autre lecteur audio, qui lui est personnalisable, et qui ressemble exactement à celui d'Archive-Host :

https://amazingaudioplayer.com/examples/
A priori, c'est la première version que vous avez.

Alors, si ça vous intéresse, je vous laisse installer le générateur sur votre ordinateur :
https://amazingaudioplayer.com/

Et puis suivre les étapes expliquées ici :
https://amazingaudioplayer.com/how-to-add-html5-audio-player-to-your-webpage/

(C'est tout en anglais mais ça devrait aller, il y a des screens explicatifs).

[d-elirium]

Bonjour,
Merci beaucoup pour cette alternative.
Celle-ci fonctionnait très bien en l'ouvrant sur une page html vierge pour voir le rendu après modification de la feuille de style .css mais, une fois les codes html glissés dans l'overall_header rien ne s'affiche hormis le tag vers le site web. Je ne sais pas trop pourquoi ça ne fonctionne pas?

[Lixyr]

Avez-vous hébergé le CSS qui va avec ? Il faut ensuite l'installer dans le template overall_header.

Code:

 <link href="ICI_LE_LIEN_CSS" type="text/css" rel="stylesheet" />

Idéalement, après cette ligne :

{CSS}

[d-elirium]

Malheureusement, ça ne fonctionne toujours pas.
J'ai hébergé mon fichier css sur archive-host, puis récupéré le lien mais je ne sais pas s'il me fallait faire une manipulation supplémentaire pour que le fichier s'exécute?

[Lixyr]

Je ne vois pas de lecteur de musique hébergé sur votre forum test. Avez-vous modifié le CSS pour que le lecteur corresponde à ce que vous voulez ?

Pour modifier l'apparence du lecteur, vous devez faire comme suit :
- Vous devez ouvrir le fichier CSS sur votre ordinateur avec un logiciel de traitement (Notpad++ si vous êtes sous Windows, ou bien Sublime Text, si vous êtes sous Mac).
- Faire vos modifications.
- Puis réhéberger le fichier sur Archive Host.
- Ensuite vous ouvrez le fichier CSS sur votre navigateur pour le mettre à jour.
Ensuite, ça se met à jour tout seul sur votre site.

[Lixyr]

Où en-est votre problème ? Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône RÉSOLU en éditant votre premier message, Votre problème est toujours d'actualité, dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté.

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.