1479 sujets

Web Mobile et responsive web design

Script responsiv ???

Pages :
Bonjour,
Je suis débutant dans le domaine,
Est t'il possible de rendre un script responsiv :

<script src="http://player.believe.fr/html5player/3610151272026/5s87fA4E89F465ze-300.js" type="text/javascript"></script>


Celui ci est un player de musique, volontairement petit sur le site pour qu'il ne dépasse pas de la page sur les mobiles.

visible sur cette page : http://pierreisabelle1.free.fr/Site/newtracks.html

Merci pour votre aide !
Salut !
bibi-piegeareves a écrit :

Est t'il possible de rendre un script responsiv :

ça veut rien dire. la responsivité ce base sur quelque chose de visible, un "script" n'est pas visible à l'oeil. un "script" ne s'adapte pas au taille d'écran.

bibi-piegeareves a écrit :

Celui ci est un player de musique, volontairement petit sur le site pour qu'il ne dépasse pas de la page sur les mobiles.

Voila. Le player tu peux le rendre responsible... avec du CSS et les @media queries
Modérateur
Bonjour,

Si je peux me permettre, regarde dans ton script la partie qui génère le code html qui correspond à ton lecteur.

L'idée est d'y insérer une classe (à préférer à une id) afin de pouvoir la personnaliser via Css
ou
regarder dans le html si ce lecteur n'est pas dans un conteneur, auquel cas tu appose une classe à ce conteneur et ensuite tout se passera en Css.

De notre côté, nous ne pouvons en dire plus (mieux) sans plus de code. Avoir accès au code en fonctionnement en temps réel serait le summum.
Merci beaucoup pour vos réponse je comprend un peu mieux !

La question peut paraître bête .
Mais comment puis je regarder dans le script la partie qui génère le code html ?
Modérateur
bibi-piegeareves a écrit :
La question peut paraître bête.
Je te rassure, elle l'est !
A moins de na pas avoir vraiment saisi le sens de ta question, je dirais en ouvrant le fichier en question, en lisant et en tentant de comprendre...

Donc tu mets "http://player.believe.fr/html5player/3610151272026/5s87fA4E89F465ze-300.js dans le champs "url" de ton navigateur préféré, tu enregistre le fichier 5s87fA4E89F465ze-300.js, tu l'ouvre puis le modifie en conséquence.
A la suite de quoi tu remplacera l'url de ta balise link par l'url interne pointant vers tons script modifié.
Enfin tu balance le tout en ligne, et comme t'as assuré comme un boss, tout roule nickel chrome Smiley cligne
Merci beaucoup pour vos réponse.
Alors je pensais avoir compris et puis, rien !
Je l'ai donc ouvert dans le navigateur, copier le code puis coller dans un fichier texte, renommer alors pour l'occase "player.js"
Et appelé comme ceci dans le code : <script src="player.js" type="text/javascript"></script>
Et je ne le voit pas réapparaître, j'ai du merdé quelque part !
Modérateur
As-tu un message d'erreur ?

As-tu aussi l'aimable possibilité de nous poster ton code (html qui appelle ton script ainsi que le script en question) ?

Et... ben quand on aura ça on y verra déjà plus clair, enfin peut-être.


A savoir que pour toute assistance, l'efficacité de celle-ci va généralement de paire avec les informations fournies.
Non pas de message d'erreur

le html qui appel mon script : 
<script src="player.js" type="text/javascript"></script>


Le script : 
if(typeof(updateBelievePlayer) == 'undefined') { function updateBelievePlayer(iframe, upc) { iframe.src = iframe.src.toString().replace(/[0-9]{13}/, upc); } } (function() { var eIframe = document.createElement('IFRAME'); //eIframe.src = 'http://player.believe.fr/v2/3610151272026?embed=1&embedType=5s87fA4E89F465ze&referer='; // eIframe.src = 'http://player.believe.fr/v2/3610151272026?embed=1&embedType=5s87fA4E89F465ze&referer='+encodeURIComponent(window.location.toString()); eIframe.src = 'http://player.believe.fr/v2/3610151272026?embed=1&embedType=5s87fA4E89F465ze&referer='+encodeURIComponent(window.location.toString()); eIframe.style.width = "300px"; eIframe.style.height = "355px"; eIframe.style.overflow = "hidden"; eIframe.style.border = "none"; eIframe.style.marginBottom = "10px"; eIframe.scrolling = "no"; var scripts = document.getElementsByTagName('script'); for(var i = 0, l = scripts.length; i < l; i++){ if(scripts[i].src.match(/.*\/html5player\/3610151272026\/5s87fA4E89F465ze\-300\.js/)){ console.log(scripts[i].parentNode); scripts[i].parentNode.insertBefore(eIframe, scripts[i]); break; } } })();


Et voici merci[/i][/i][/i][/i]
Modérateur
Je vois, la partie du script que tu as téléchargée fait appelle à une autre partie en ligne:
var eIframe = document.createElement('IFRAME'); //eIframe.src = 'http://player.believe.fr/v2/3610151272026?embed=1&amp;embedType=5s87fA4E89F465ze&amp;referer='; // eIframe.src = 'http://player.believe.fr/v2/3610151272026?embed=1&amp;embedType=5s87fA4E89F465ze&amp;referer='+encodeURIComponent(window.location.toString()); eIframe.src = 'http://player.believe.fr/v2/3610151272026?embed=1&amp;embedType=5s87fA4E89F465ze&amp;

Tout ça crée une url vers player dot believe dot fr

En fait cette adresse contient la référence vers la vidéo que tu as sélectionné. La solution (théorique) est que tu héberge à la fois le lecteur ET le clip.
Théorique car bien sûr il faut au préalable obtenir une autorisation d'hébergement et de diffusion.

Partant de l'hypothèse du contraire, t'es coincé à ce niveau, tu ne peux pas agir sur le code en amont et te faut passer par une surcouche qui agira après le script de la vidéo.
JS est ton seul recours.
Modifié par Greg_Lumiere (21 Jun 2016 - 10:07)
Ha oui là ça devient compliqué, je crois que ce n'est plus trop de mon ressort !
je crois que ça restera petit pour les ecran de PC alors !!!
Merci pour les pistes
Au pire, envoi une adresse qu'on puisse tester, peut être trouverons nous la solutions en injectant du js
Oué du coup c'est une <iframe>.... c'est ingérable niveau responsive. en tout cas ce n'est pas de mon ressort.
Modérateur
JENCAL a écrit :
Oué du coup c'est une &lt;iframe&gt;.... c'est ingérable niveau responsive. en tout cas ce n'est pas de mon ressort.

Me vient une idée du fait qu'il s'agit d'une iFrame.

L'iFrame est un conteneur personnalisable en Css.
S'il est pourvu d'un sélecteur unique (id ou ensemble de classes) il doit être possible de faire appliquer le style en JS.
Sinon en se basant sur le contexte (ex: body > div.machin iFrame)

J'en ai déjà vu utiliser des media-queries en JS.

Peut-être une piste à explorer...
Modifié par Greg_Lumiere (21 Jun 2016 - 15:59)
Modérateur
JENCAL a écrit :
Petit exemple d'iframe reponsive.
Sur Firefox, le rendu est parfait !

Si ce n'est un léger détail, ce serait encore mieux si la miniature était elle aussi adaptative.

En espérant que ma remarque ne tombera pas dans l'oreille d'un sourd Smiley cligne

Bonne journée !
Pages :
Sujet clos
Aller à