When you embed a flip book to your blog or website, you may need to adjust the height and width of the flip book to fit the flip book to a background such as a TV screen image or a painting frame. The following are three embedded examples of a flipbook with magic images.
This article will explain how to adjust height and width of flip book in blog and website. If you don’t have a embed code of flipbook already, you can use VeryPDF Flipbook Maker to generate a flipbook and upload the flipbook online. Then, you can view the embed code in the interface of the Flipbook Maker or in the online account of the online service. Firstly, let’s see how to get the embed code of a flip book. If you have embed codes at hand, you can skip to the next step.
1. Get the embed iframe code
You can use VeryPDF Flipbook Maker to make flip books. You can download VeryPDF Flipbook Maker by clicking here. Then please use it to design a flip book. You can read Embed flip book in blog to see how to make a flip book and get the embed code. This article only focus on how to adjust the height and width of the flip book in blog.
2. Adjust height and width of flip book in blog
The following are four examples of embed iframe code. The first example is the original embed code of the flip book. The rest three examples matches to the above demos respectively.
--------Example 1—Original code---------------------------------------------------------
<iframe name="embed" src="http://online.verypdf.com/u/46/flipbook/magic-images/index.html" width="100%" height="100%" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
-------------------------------------------------------------------------------------------------
Look at the two pair of options that are marked by red in the code above. All you need to do is to change the value enclosed by the double quotes after width= and height=. If you want to get a size like the first demo above, you need to change the two pair of options to width="480px" height="350px".Then, the whole embed code would be:
--------Example 2—For demo 1---------------------------------------------------------------------
<iframe name="embed" marginwidth="0" marginheight="0" src="http://online.verypdf.com/u/46/flipbook/magic- images/index.html" frameborder="0" width="480px" height="350px";></iframe>
-------------------------------------------------------------------------------------------------
If you want to change the size of the embed flip book to the size as the second demo, you can change the values of the pair of options to width="29.5%" height="210px". Then the code would be like the following one:
--------Example 3—For demo 2-----------------------------------------------------------
<iframe name="embed" marginwidth="0" marginheight="0" src="http://online.verypdf.com/u/46/flipbook/magic- images/index.html" frameborder="0" width="29.5%" height="210px" ;></iframe>
-------------------------------------------------------------------------------------------------
If you want to change the size to the third demo, please change the pair of options to width="140mm" height="100mm". Then, the whole code would be like:
--------Example 4—For demo 3------------------------------------------------------------
<iframe name="embed" marginwidth="0" marginheight="0" src="http://online.verypdf.com/u/46/flipbook/magic- images/index.html" frameborder="0" width="140mm" height="100mm" ;></iframe>
-------------------------------------------------------------------------------------------------
The value for the two options width and height also permit units such as px, mm, points, and inch. For example,
- width="40%" height="600px"
- width="400px" height="60%"
- width="10mm" height="100%"
- width="45%" height="5cm"
- width="10inch" height="98%"
- width="4cm" height="5cm"
Can you adjust and change the height and width for your flip book in your blog and website now? If you still have any doubts, please feel free to connect the support group of VeryPDF.