Iframe

Cette action permet d'afficher du contenu externe au site dans un article.

  • Facilité d'utilisation
  • responsive
  • aucun risque d'effacement par un éditeur wysiwyg
🆙 iframe : introduire un iFrame responsive dans un article

Cliquer pour lire la documentation

syntaxe {up iframe=URL}
@author: LOMART @version: UP-1.9.5 @license: GNU/GPLv3 @credit: https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/ @tags: HTML
  • iframe: URL site distant
  • preview: image affichée avant chargement de l'iframe

paramétre de l'iframe

  • allowfullscreen = allowfullscreen: autorise le plein ecran
  • scrolling = no: affiche les ascenseurs si nécessaire
  • ratio = 16:9: sous forme largeur:hauteur ou ratio 0.5625 ou pourcentage 56.25%
  • height (h,hauteur): hauteur (utile pour mobile)

Style CSS

  • id: identifiant
  • class: classe(s) pour bloc externe
  • style: style inline pour bloc externe
  • css-head (base-css): style ajouté dans le HEAD de la page

Interne, conservé pour compatibilité

  • iframe-class: classe(s) pour bloc
  • iframe-style: style inline pour bloc

Ajouter une iframe dans un éditeur wysiwyg est toujours une opération à risque. Immédiat si l'éditeur est mal configuré, mais surtout une bombe à retardement si l'article est ouvert avec un autre éditeur ou par un rédacteur ayant une configuration éditeur moins permissive.

Pour afficher la vidéo ci-contre, il suffit de mettre l'URL de la vidéo comme argument principal :

{up iframe=//www.dailymotion.com/embed/video/x78gqbi | preview=images/actions-demo/iframe/iframe-dailymotion.jpg}

Pour la démo, elle ne démarre pas automatiquement. En cas de besoin, ajoutez ceci à l'URL. queue-enable évite que d'autres vidéos soient lancées après la vôtre.

?autoplay=true&queue-enable=false

L'option preview est utilisée pour afficher une image avant le chargement du contenu de l'iframe.

Par défaut le contenu de l'iframe occupe la largeur de son bloc parent avec un ratio (rapport largeur / hauteur) de 16:9.

Pour afficher un site internet, je choisis un ration de 4:3 et j'autorise la présence d'ascenseur si nécessaire.

{up iframe=//lomart.fr
| scrolling
| ratio=4:3
| class=bg-bleuPale}

Plutôt qu'une image preview, je met un fond bleu pâle pour réserver visuellement l'espace (class=bg-bleuPale)

Note : le ratio peut être indiqué sous les formes : 16:9 (largeur:hauteur), 0.5625 (9/16) ou 56.25% (pourcentage hauteur par rapport à largeur)

Contenu responsive

Le document ci-dessous a été créé avec l'application Flip-Builder à partir d'un fichier PDF. Il est hébergé sur le site dans un sous-dossier de images

{up iframe=images/Flip_PDF/index.html | height=90vh}

height=90vh spécifie la hauteur occupée par l'iframe (90vh = 90% de la hauteur de l'écran).
Cette notion est particulièrement utile sur les mobiles si le contenu est responsif. C'est inutile avec une vidéo qui conserve toujours le même ratio.

Un dernier exemple

Auparavant, nous utilisions l'action HTML pour ajouter une iframe. Voici un des exemples de la démo avec l'action iframe.

action HTML

{up html=iframe 
| src=https://www.google.com/maps/embed?pb=!1m0!4v1510843613661!6m8!1m7!1sCAoSLEFGMV FpcE9LekZ1NEFXcEFBWkpJM3NwYk5BSk5GV25qSFBNbGhTYkF4 eU5E!2m2!1d50.518660704295336!2d5.222107117821095! 3f328.2343295257333!4f-5.481540079137304!5f0.7820865974627469 
|width=600 
| height=450 
| frameborder=0 
| style=border:0 
| allowfullscreen}
impossible d'afficher le contenu
{/up html}

action IFRAME

{up iframe=https://www.google.com/maps/embed?pb=!1m0!4v1510843613661!6m8!1m7!1sCAoSLEFGMV FpcE9LekZ1NEFXcEFBWkpJM3NwYk5BSk5GV25qSFBNbGhTYkF4 eU5E!2m2!1d50.518660704295336!2d5.222107117821095! 3f328.2343295257333!4f-5.481540079137304!5f0.7820865974627469
| h=90vh}

 

Pour info, cette page utilise 10 action(s) :
box (1) upactionslist (1) flexauto (2) iframe (4) readmore (1) jcontent-info (1)