Embedding can be tricky when you combine our code in your own pages. Our helpdesk staff will be happy to try and help you in such cases, but here are some of the more common problems that we have seen.
- The fullscreen button doesn’t work
- The publication is embedded and flips, but there is a button Click to Read
- I embedded a full publication, but only see a clickable cover image
- All that appears is just a normal link to the publication, but not the full publication
- No publication is visible at all on my page
When you embed content (like a FlippingBook) on your page, this content is put in its own inline frame. When you write the code, you can specify whether or not this frame is allowed to be displayed full screen. If you don’t specify anything, the browser will assume that it is NOT allowed to do this.
So if the fullscreen button doesn’t work, then this is usually because of one of these two reasons:
1. You use your own embed code, something like:
<iframe src="https://www.mysite.com/my_publication" width="740px" height="480px" frameborder="0"<>/iframe>
and did not include the allowfullscreen tag in the code. If you change it to:
<iframe src="https://www.mysite.com/my_publication" width="740px" height="480px" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
then all should work fine.
2. You use our code, or your embed code does include ‘allowfullscreen’, but the code is put inside another iframe/element that does NOT have the ‘allowfullscreen’ tag. In this case, the parent’s frame overrides the request to go full screen. Check your code to see if any parent elements contain the allowfullscreen tag.
If you see the full publication, but no top and bottom menus and a Click to Read button over the pages, then your embed code itself is fine. This is simply the default behavior of our flipbooks, which occurs when the available window size for it is less than 550 pixels wide or less than 300 pixels high. The same thing happens, when you resize a ‘normal’ (not embedded) flipbook in a browser, and reduce the size below these limits. The publication just becomes too small for anyone to read. The only way to prevent this is to increase the size that is available.
If your embed code itself uses settings that exceed the 550x300 margins, but you still get the Click to Read button, then there is a restriction on a higher level. For example, if you have divided your page into several columns, of 500 pixels wide. So even if your embed code wants to be 550 pixels wide, the column doesn’t allow that.
The column on the left-hand side is only 500 pixels wide, causing the publication to be shown in Click to Read mode.
The most likely reason is similar to the issue described above: the window that is available to show the flipbook is not big enough to show a full publication. If the size available is less than 400 pixels in width or 200 pixels in height, then even the Click to Read mode becomes inconvenient and we fall back to a clickable cover. You can see an example of a full publication fit into a very narrow column in the screenshot above.
If you only see the link, then your CMS probably has removed (or ignored) the second part with the script. You can contact the administrator of your CMS to ask if he can allow you to insert scripts. If that is no possibility, then you can try our iframe code, which does not rely on scripts.
This is one of the most tricky problems, which may have several reasons. The most common reasons are that you have pasted the code in the wrong place, and the browser doesn’t process it. You can try to paste the code somewhere else, and see if it appears. A second possible reason is that your page is opened over https:, but your embed code contains links that start with http:. In that case, the browser will block it, because your page promises secure communication (https) to the users. But if the embedded part does not use https, then any data entered in that part is not guaranteed to be secured, and the browser (correctly!) blocks that element. Our publications support https, so simply change the links in the embed code from http: to https: and all should be fine.