- Statut : non résolu
- Ce sujet contient 15 réponses, 3 participants et a été mis à jour pour la dernière fois par
, le il y a 8 années et 6 mois.
-
Messages
-
Bonjour, 🙂
Nous avons construit une page sur notre site wordpress (WP 4.5.3 et thème Enigma Pro (thème responsif)) dédiée à la télé à l’aide de Page Builder.
A ce titre, nous avons « embed », dans un conteneur Site Origin Editor, le programme télé du magazine téléloisirs.fr (http://www.programme-tv.net/) sur la colonne de gauche de la page.
Ce code est :
Votre navigateur ne supporte pas le format iframe Votre programme TV avec Télé-LoisirsNous avons testé la qualité responsive de la page.
On s’est aperçu que l’iframe n’est pas « responsive » au niveau de sa largeur, le programme télé débordant de son conteneur Site Origin Editor, à certaines résolutions d’écran.
Nous sommes très étonnés car nous pensions que Page Builder était responsif.
Pouvez-vous, s’il vous plaît, nous aider à résoudre ce problème ?
Merci beaucoup 👏
A partir du moment où vous fixez la largeur dans le code de l’iframe, ça me semble logique que çà ne soit pas responsive.
Le problème ne vient pas de Page Builder, mais du code de programme tv que vous avez inséré.
Vous avez basiquement deux façons de vous en sortir :
1- supprimer les informations de taille dans le code, et particulièrement le « style » que vous remplacerez par une classe css dans les options de votre thème ou dans un thème enfant. C’est cette classe css qui prendra en charge le responsive
2- modifier à la volée les informations de taille via javascriptBonjour Lumière de Lune,
Merci pour votre réponse rapide.
Pourriez-vous nous décrire les étapes à suivre ?
En particulier, les codes à insérer et où ?
Merci beaucoup. 👏
Salut,
Quelque chose qui n’a rien a voir, avec votre question.. Mais attention au droit d’auteur 😉 Si je regarde bien votre lien c’est du pur plagiat.. Si ils vous tombent dessus vous aller prendre très cher.
Bonne soirée.
@ WebCaine : Ils l’ont permis. D’ailleurs, notre petit site est sans but lucratif. Merci en tous les cas de nous le signaler 🙂
@ tous :
Essayant de rendre l’iframe responsive,
1) nous avons retenu du code que cette portion :
2) Nous l »avons encadré par :
etce qui donne
3) Nous sommes allés dans le dossier de thème enfant et ouvert le fichier style.css pour ajouter ces codes :
.programmetele-container {
position: relative;
padding-bottom: 56.60%;
height: 0;
overflow: hidden;
}.programmetele-container {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}Cà n’a pas marché
Quelqu’un peut-il dire, s’il vous plaît, ce qu’il aurait fallu faire ?
Merci beaucoup par avance 👏
Tu a trouver la solution ou pas ?
Car ton Iframe à un problème sur quel résolution ?
Lumière de Lune, et mettre un media queries pour modifier la largeur et la hauteur sur tel résolution serait pas plus simple ? Humm
Hello
1-
http://www.programme-tv.net/widget-tv/programmes-tv.html?size=300×530
Il y a une taille définie dans la source de l’ifram
2-
.programmetele-container {
position: relative;
padding-bottom: 56.60%;
height: 0;
overflow: hidden;
}.programmetele-container {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}C’est le même sélecteur…
mettez un max-width, éventuellement
@WebCaine avec la définition de la taille dans la source de l’iframe ?Je croit avoir compris.
Comme l’a dis Lumière de Lune, il y a déjà une taille définit, tu ne pourra que adapter pour par exemple les versions mobile (max-width:480px) s’affiche de tel sorte, en modifiant la hauteur et la largeur de ton iframe. Et ainsi de suite, enfin j’ai bien compris ? J’ai du mal a saisir le problème.
Puis, j’aimerais rajouter quelque chose, mettre des styles dans une balise iframe ou autres balises de sémantique n’est franchement pas recommandé. C’est pas le mieux à faire.
Oui c’est ça 🙂
Sur ce genre de choses, soit l’iframe peut fonctionner sans la définition de taille, soit il faut modifier le contenu de la balise html, d’où l’utilisation du javascrip en donnant une id au conteneur de l’iframe.
Bonjour Lumière de Lune, Bonjour WebCaine, 🙂
J’arrive sur le forum.
Merci de vos messages 👏
J’ai tenté la procédure ci-dessus décrite dans les posts. Mais l’iframe débordait sans arrêt de son conteneur quand on est à 800×1280 ou à 980×1280 (test firefox).
J’ai décidé alors de changer de méthode. J’ai supprimé les codes ci-dessus décrits dans le le fichier style.css. En effet, n’étant pas un spécialiste de ces codes, je craignais de commettre l’irréparable.
C’est ainsi que j’ai installé hier soir un plugin : Advanced iFrame.
L’iframe (programme télé) est alors devenu responsive (test sur firefox vue adaptative) (installation de l’iframe dans deux conteneurs ; chaque conteneur avec un réglage différent du plugin). Toutefois, je signale que c’est après une nuit, que ce matin, l’iframe est responsive (aux deux endroits).
Les tests qui ont eu lieu tout de suite après l’installation et les réglages, ont montré que l’iframe persistait à ne pas être responsive.
C’est donc après un temps de latence de plusieurs heures, après l’installation du plugin et les divers réglages, que l’iframe est devenu responsive.
Je signale aussi que les tests sont encore lacunaires puisqu’ils n’ont eu lieu qu’avec la fonctionnalité installée sur firefox.
Je signale par ailleurs donc, comme dit plus haut, que pour faciliter les comparaisons, j’ai installé l’iframe deux fois avec des réglages différents. Nous préférons évidemment celui qui est installé en bas puisque l’adaptabilité semble plus complète, alors qu’en haut, il y a une barre pour faire défiler sur la largeur le programme télé.
Pour comprendre, lien vers la page : Page iframe programme tv
Enfin, je ne suis pas arrivé à reproduire la customization choisie sur le site d’origine du programme. Je revois çà plus tard.
Pour l’instant, la priorité, c’est de rendre responsive ce programme télé. Bien à vous 👏
oops la barre de défilement se trouve aussi pour le programme télé du bas… ce qui n’est pas très esthétique. je vais essayer d’enlever çà 😐
Pour faciliter la compréhension, je poste les codes de chaque programme :
En haut,
[advanced_iframe securitykey= »xxxxxcode de sécurité du pluginxxxxx » src= »http://www.programme-tv.net/widget-tv/programmes-tv.html » width= »100% » height= »530″]
En bas,
[advanced_iframe securitykey= »xxxxxcode de sécurité du pluginxxxxx » use_shortcode_attributes_only= »true » src= »http://www.programme-tv.net/widget-tv/programmes-tv.html » width= »auto » height= »530″ id= »advanced_iframe » enable_responsive_iframe= »true » resize_on_ajax_jquery= »true » ]
amua wrote:Toutefois, je signale que c’est après une nuit, que ce matin, l’iframe est responsive (aux deux endroits).Ce qui veut simplement dire que vous avez un plugin de cache, ce qui est impossible à deviner, puisque vous n’avez pas rempli le questionnaire qui s’affiche à la création du sujet.
- Vous devez être connecté pour répondre à ce sujet.