Phraseanet allows the integration of media in third party applications (blog, CMS, etc.) using iframe. This iframe has everything you need to read the targeted media (Image, PDF, videos, etc.).
See example below:
The dimensions of the content of this iframe automatically adapt to the dimensions of this iframe.
Note
The dimensions of a media contained in an iframe may be reduced but not enlarged beyond the original size of the media.
In order to facilitate responsive HTML integration, the content of the iframe emits via the JavaScript API Window.postMessage the optimal dimensions of the content according to the defined dimensions of the iframe. It is up to the parent container (the iframe container) to use these values and adapt the size of the iframe.
To achieve it easily, we provide a javascript script to automatically adjust the size of iframes in width or height.
Javascript script download (archive in zip format).
Warning
This script will not work for multiple iframes of different dimensions with the same media (same URL).
For each iframe requiring an automatic height adjustment, just fix the width (inline or via sheet style) and add the data attribute data-optimize-area with the value ‘height’:
<iframe src="http://..."
width="..."
data-optimize-area="height"
allowfullscreen></iframe>
For each iframe requiring an automatic width adjustment, just fix the height (inline or via sheet style) and add the data attribute data-optimize-area with the value ‘width’:
<iframe src="http://..."
height="..."
data-optimize-area="width"
allowfullscreen></iframe>