Phraseanet permet l’intégration de médias dans des application tièrces (blog, CMS, etc.) au moyen d’iframe. Cette iframe embarque tout le nécessaire pour lire le média ciblé (Image, PDF, vidéos, etc.).
Exemple ci-dessous :
Les dimensions du contenu de cette iframe s’adaptent automatiquement aux dimensions de cette même iframe.
Note
Les dimensions d’un media contenu dans une iframe pourront être réduites mais pas agrandies au delà de la taille originale du média.
Afin de faciliter l’intégration HTML responsive, le contenu de l’iframe emet via l’API Javascript Window.postMessage les dimensions optimales du contenu selon les dimensions définies de l’iframe. A charge au contener parent (le contener de l’iframe) d’exploiter ces valeurs et adapter la taille de l’iframe.
Pour faciliter cette tâche, nous fournissons un script javascript permettant d’ajuster automatiquement la taille des iframes en largeur ou hauteur.
Télécharger le script javascript (archive au format zip).
Avertissement
Ce script ne fonctionnera pas pour plusieurs iframes de dimensions différentes présentant le même média (même URL).
Pour chaque iframe nécéssitant un ajustement automatique en hauteur, il suffit de fixer la largeur (inline ou via feuille de style) et ajouter l’attribut de donnée data-optimize-area avec la valeur ‘height’ :
<iframe src="http://..."
width="..."
data-optimize-area="height"
allowfullscreen></iframe>
Pour chaque iframe nécéssitant un ajustement automatique en largeur, il suffit de fixer la hauteur (inline ou via feuille de style) et ajouter l’attribut de donnée data-optimize-area avec la valeur ‘width’ :
<iframe src="http://..."
height="..."
data-optimize-area="width"
allowfullscreen></iframe>