Important: While it is possible to do, we generally do not recommend iframing catalogs unless you have a specific reason for doing so.
  • As visitors come from a multitude of devices, including tablets, phones, and desktops, you’ll have to handle the different screen sizes yourself.
  • Tablets and phones have special requirements to ensure they work when users rotate their device.
  • The smaller the catalog is, the harder it is for users to read it. By opening up catalogs in a new window, rather than in an iframe, you ensure the users get the best possible reading experience.
This being said, if you want or need to embed the flipbook in an <iframe> element, please make sure to read and understand the following guide carefully.

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.

Allow 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 compatbility)
  • webkitallowfullscreen (for backwards compatbility)
  • mozallowfullscreen (for backwards compatbility)

Therefore, 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;"
  allowfullscreen
  webkitallowfullscreen
  mozallowfullscreen></iframe>

Embedding flipbooks in specific sizes

100%×100% size (full viewport size)

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 = '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: 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 > Design > Layout > Hide Standard UI.
Or have a look at Query String Parameters

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.