28182 sujets

CSS et mise en forme, CSS3

[Résolu] Comment mettre en forme le contenu d'une iFrame (playlist Dee

Bonjour à tous et à toutes,

J'aimerais intégrer une playlist Deezer dans l'une des pages de mon site.
Je suis donc allé sur le site de Deezer, sur la page de la playlist que je veux intégrer et (je fais court) j'ai récupéré le code HTML que Deezer me donne qui commence et se termine par iFrame
Ex :
<iframe title="deezer-widget" src="https://widget.deezer.com/widget/dark/playlist/xxxxxxxxx" width="100%" height="540" frameborder="0" allowtransparency="true" allow="encrypted-media; clipboard-write"></iframe>

J'ai ensuite collé ce code dans ma page pour que la playlist apparaisse sur ma page.
Jusque là, pas de soucis, la playlist s'affiche très bien.

Là où ça coince, c'est que j'aimerais changer 2-3 petites choses (ex : la couleur du bouton lecture)
J'ai pu le faire "en direct", grâce aux outils de développement du navigateur, dans l’Éditeur de style
Comme ça fonctionnait, j'ai copié/collé mes (5) règles CSS dans ma feuille de style => fonctionne pas (complètement). Les (3) règles CSS qui concernent le "contenu" même de l'iFrame ne fonctionnent pas. En revanche, celles (les 2 règles CSS) qui concernent le "conteneur" iFrame (pour notamment centrer la playlist) fonctionnent.
J'ai donc changé mon fusil d'épaule et au lieu d'insérer ces règles dans ma feuille de style, je les ai intégré dans le code HTML, via la balise Style => pas mieux
Pire, quand je cherche dans le HTML, les sélecteurs que j'utilise dans mes règles CSS, ça me les trouve sans problème, mais quand je regarde à droite, dans le panneau Règles (CSS), mes règles n'apparaissent pas.

Auriez-vous une idée sur comment mettre en forme le contenu de cette iFrame ?
Savez-vous pourquoi, quand je crée/colle mes règles CSS dans l'Editeur de style, ça fonctionne, mais dès que je les mets ailleurs (dans une feuille de style ou dans le HTML), ça ne fonctionne pas ?

Merci par avance pour votre aide

Bonne journée Smiley cligne
Précision :
Si je mets "iframe" devant mes sélecteurs et que je les cherche dans le HTML, ça me les trouve pas alors que si j'enlève "iframe", ça me les trouve sans problème, comme si "iframe" faisait rempart, cachait son contenu si on vient de "l'extérieur".
Bonjour,

Il n'est pas possible de modifier le contenu d'une iframe puisque ce contenu est défini par le site widget.deezer.com sur lequel tu n'as pas les droits de modification.
Il faut se contenter des options de personnalisation proposé par Deezer sur https://widget.deezer.com/
Modérateur
Bonjour,

Les styles de ta page principale ne sont pas applicables au document contenu à l'intérieur de l'iframe. C'est le fonctionnement normal d'une iframe. Si tu peux changer les styles du document contenu à l'intérieur de l'iframe via l'éditeur de css du navigateur, c'est parce que celui-ci "voit" l'intérieur de l'iframe (normal, il faut bien que le navigateur puisse afficher ce contenu).

On aurait éventuellement pu espérer modifier les styles du document contenu à l'intérieur de l'iframe via un peu de javascript qui serait dans la page principale. Mais si le code de deezer a été fait sérieusement, il est possible si ce n'est probable que toute modification via javascript soit refusée pour des questions de sécurité (je n'ai pas vérifié dans les détails).

EDIT: pendant que je réfléchissais au contenu de ma réponse, Pitet a posté une réponse que je n'avais pas vue et qui va dans le même sens que la mienne.

Amicalement,
Modifié par parsimonhi (28 Feb 2023 - 12:56)
Bonjour,

Merci pour vos réponses. Je m'en doutais malheureusement.
Comme tu l'as suggéré Parsimonhi, j'ai essayé d'insérer du style dans l'entête de l'iFrame via le script jQuery ci-dessous, mais sans succès, bien que je n'ai pas de message d'erreur :
$(".node-item-teaser p > iframe").on("load", function() {
    let head = $(".node-item-teaser p > iframe").contents().find("head");
    let css = '<style type="text/css">.chakra-ui-light [class^="CentralButton"]{background: linear-gradient(50deg, rgb(220, 176, 84) 10%, rgb(210, 149, 55) 70%, rgb(30, 30, 36)) 0% 0% / 200% 200%;}.chakra-ui-light [class^="QueuedWidget"]{border-radius: 0px;}.chakra-ui-light [class^="TrackList__Container"]{background-color: #1d1d1b;}</style>';
    $(head).append(css);
});

Comme tu dis, Deezer a dû bloquer ça par mesure de sécurité Smiley decu

Merci quand même Smiley cligne j'aurais essayé et j'aurais appris (grâce à vous) que ça n'est malheureusement pas possible, surtout si c'est sécurisé.

Bonne journée Smiley cligne
Prévenir un modérateur
Répondre au sujet
Aller à