Adding Video to a Digital Flipbook

So you’ve decided to transition an existing InDesign layout to go from print to digital flipbook using in5. Great! You’ll want to add interactivity to the document to create a richer experience for your readers. One quick and easy upgrade to get you started is to add video to your document, either embedded video or video linked to a service like YouTube or Vimeo.

Let’s start by replacing a still image from the print version with a short video file that autoplays when the reader turns to that page.

Size and Placement

Even though InDesign allows you to crop and scale any placed video, that cropping won’t be honored in the exported HTML playback. It’s much better to crop and scale to the necessary size before placing it into InDesign.

In this example, the final dimensions of the image we want to replace are 612 x 792 pixels. To get the exact size, pull in any bleed on the image and check the width and height values in the Control panel. Delete—or hide—the still image.

The MOV-formatted video that will replace our image is currently 1920 x 1080—in a landscape orientation. Head over to Photoshop and open that MOV file. Next, crop the video to that 612 x 792 format, re-sizing to fit, if necessary. Now export the video file in the required format of MP4. Go back into InDesign and place—using File > Place—the video where the still image was.

Proper Settings

Now let’s input a couple of settings by selecting the in5 menu and choosing Widgets > Video. Make sure Autoplay and Mute are selected, then de-select Auto Rewind and everything else. With Auto Rewind de-selected, the video will stop on the last frame after playing.

There is actually one more setting to get in place and that involves going to the Media panel (Window > Interactive > Media). In this panel, set the Poster Frame to None. At this point the preview goes away, but the diagonal lines let you know a video exists in the frame.

Export the Final Project

Export your file by going to the in5 menu and choosing Export to HTML5 with in5, set the necessary export options—choose Flipbook, if you want the page curl and flipping animation—and export to HTML5. Having a video instead of a still photo creates a more immersive experience, making the spread come alive and really drawing the reader into the content.

If you want to see this in action and get started migrating your own print projects to interactive digital outputs, check out Keith Gilbert’s full course “Transitioning from Print to Digital with InDesign and in5” at Ajar Academy.