Iframing Flipbooks

A brief note on domains

For best results, the flipbook you wish to embed should exist on a subdomain to the domain on which the iframe is placed. A working Branded Domain module is required for this. If you embed the flipbook using the iPaper-branded URL, we cannot offer support for it and weird cross-device behavior can be expected.

Foreword

When using iframes on mobile devices it can be tricky trying to make it respond as expected. Below we show you how to make flipbooks behave optimally.

Required permissions

Autoplaying and fullscreen access in video enrichments

In order to allow elements in the flipbook to do the following when it is iframed:

  1. Autoplay videos without hindrance, and

  2. Have access to the fullscreen API (e.g. embedded videos from Vimeo/YouTube or native MP4 videos)

…the <iframe> element needs to allow these explicitly by means of specifying a feature policy. This is done by adding the following attributes to the element:

  • allow="autoplay; fullscreen;"

  • allowfullscreen (for backwards compatibility)

  • webkitallowfullscreen (for backwards compatibility)

  • mozallowfullscreen (for backwards compatibility)

Clipboard and share

Flipbooks use native browser APIs for sharing and copying URLs. Those APIs require extra permissions to be granted on iframes:

  • allow="web-share;" gives the iframe a permission to use the native sharing functionality provided by the visitor's OS

  • allow="clipboard-write;" gives the iframe a permission to write data into the visitors clipboard

Iframe tag with all required permissions

Your <iframe> source will look a little like this, with YOUR_FLIPBOOK_URL replaced with the absolute URL of the flipbook you want to embed on your page:

<iframe
  src="YOUR_FLIPBOOK_URL"
  allow="autoplay; fullscreen; web-share; clipboard-write;"
  allowfullscreen
  webkitallowfullscreen
  mozallowfullscreen></iframe>

Embedding flipbooks in specific sizes

100%×100% size (full viewport size)

Note:

This is supported on all platforms and is the recommended way of iframing catalogs.

In order to iframe a iPaper catalog, spanning 100% of page, we need to use a specific setup. The markup below shows the essence of what is needed. Firstly, if we set the <iframe> element to have the width and height of 100% we must place this inside a div. Having done this we need to do the following:

  • Doctype must be <!DOCTYPE html>

  • Set the wrapper <div> width and height to 100%.

  • Set the wrapper <div> overflow to hidden.

  • Set <body> and <html> height to 100%.

  • Include the <meta> tag presented below.

  • Include the <script> tag presented below, setting the document.domain to the root domain used.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
  <head>
    <title>Catalogues</title>
    <style type="text/css">
        * { margin: 0; padding: 0; }
    </style>
    <script type="text/javascript">document.domain = 'ipaper.io';</script>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />
  </head>
    <body style="height: 100%">
        <div style="height: 100%; width: 100%; overflow: hidden">
            <iframe
                src="http://test.ipapercms.dk/Releases/Mobile/"
                scrolling="no"
                frameborder="0"
                style="width: 100%; height: 100%"
                allow="autoplay; fullscreen;"
                allowfullscreen
                webkitallowfullscreen
                mozallowfullscreen></iframe>
        </div>
    </body>
</html>

Non-100%×100% size

For these platforms you can specify width in any size you want, even in percentages. Do take care to leave enough space for the user to have a usable experience however. To set the size, you need to change the dimensions on the outer div like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
  <head>
    <title>Catalogues</title>
    <style type="text/css">
        * { margin: 0; padding: 0; }
    </style>
    <script type="text/javascript">document.domain = 'ipapercms.dk';</script>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />
  </head>
    <body style="height: 100%">
        <div style="height: 300px; width: 600px; overflow: hidden">
            <iframe
                src="http://test.ipapercms.dk/Releases/Mobile/"
                scrolling="no"
                frameborder="0"
                style="width: 100%; height: 100%"
                allow="autoplay; fullscreen;"
                allowfullscreen
                webkitallowfullscreen
                mozallowfullscreen></iframe>
        </div>
    </body>
</html>

Dynamically Resizing

Dynamically resizing the div will work. Do make sure you resize the outer element and not the iframe.

Removing the iPaper User Interface

To remove the iPaper user interface, go to Settings > General > Interface > Hide top bar. Or have a look at Query String Parameters

Note:

All JavaScript events will still be fired, even without the user interface present.

Troubleshooting

There is unexpected whitespace around my flipbook

Symptoms: There is unexpected whitespace around the flipbook (either vertically or horizontally). When the viewport is resized to a smaller size, the padding proportionally decreases.

Common causes: The containing element of the <iframe> element or the <iframe> element itself has an explicit width that is too large compared to the maximum size we render the flipbook as.

Solution: Set a max-width or max-height property on the containing element of the <iframe> element to a specific value (for instance 720px). Experiment with different values that work well on exactly your website and different window sizes.

Last updated