Page htmlContent

Each page can have a htmlContent property, which allows you to add any HTML as overlay on a flipbook page. The value of htmlContent is a string, here is an example

const options = {
    pages: [
        {
            src: "book1/1.jpg", 
            thumb: "book1/thumb1.jpg", 
            htmlContent: '<div>test</div>'
        },
        ...
    ]
}

new Flipbook(container, options)

Using htmlContent property you can add any HTML content to page. Inline CSS is used for styling and positioning. For example

htmlContent: '<a href="https://real3dflipbook.com" style="position: absolute; top: 100px; left: 100px; color: red; font-size: 20px;">Real3D Flipbook</a>'

mp4 Video

htmlContent: '<video class="flipbook-page-item" playsinline="" loop="" autoplay="" muted="" style="top:313px;left:40px;width:230px;height:128px;"><source type="video/mp4" src="https://real3dflipbook.com/wp-content/uploads/2020/03/interior_design.mp4"></video>'

Youtube Video

htmlContent: '<iframe class="flipbook-page-item" src="https://www.youtube.com/embed/Cv1W4nzxPBM" style="top:454px;left:43px;width:226px;height:126px;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>'

Internal Link

Link to flipbook page 4

htmlContent: '<a class="flipbook-page-item flipbook-page-item-link internalLink" href="#" data-page="4" style="width: 406px; height: 128px; position: absolute; top: 312px; left: 285px;"></a>'

External Link

htmlContent: '<a class="flipbook-page-item flipbook-page-item-link" href="https://real3dflipbook.com/" target="_blank" style="width: 206px; height: 40px; position: absolute; top: 893px; left: 64px;"></a>'

It is possible to add multiple elements, basically any HTML content can be added to pages.

The height of the HTML page overlay is 1000px.