iframe ~ contenu externe responsive

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 css : https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/ tags HTML
  • iframe: URL site distant
  • allowfullscreen = allowfullscreen: autorise le plein ecran
  • scrolling = no: affiche les ascenceurs 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)
  • preview: image affichée avant chargement de l'iframe
  • class: classe(s) pour bloc externe
  • style: style inline pour bloc externe
  • iframe-class: classe(s) pour bloc - utilisation interne
  • iframe-style: style inline pour bloc - utilisation interne
  • css-head (base-css): style ajouté dans le HEAD de la page

    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}