How to add video and animation to a digital publication

Video and sound go into Layout by Zaweba by placing them on the page with a poster picture, and you animate objects with the Animation panel. Both work in fixed layout EPUB and HTML exports, where media gets a player and animations run with their own motions, triggers and timing. The panel has a browser preview, so you can watch the result before you export.

Digital editions of magazines, children's books and product guides are where this earns its keep. The page keeps its designed look, and parts of it move or play.

Video and sound on the page

Place a video or sound file much as you'd place a picture, and give it a poster: the still image shown before playback starts. A good poster matters, because it's what readers see on the page and it stands in for the media wherever it can't play.

In EPUB and HTML the media gets a player. In an interactive PDF it goes in as an attachment rather than playing in place, so if the PDF is the main way people will read the publication, make sure the poster and any caption tell the reader what's there.

Animating objects

The Animation panel works on objects in the layout. You choose a motion, decide what starts it and set the timing. A heading can slide in, a picture can fade up after a short delay, a set of labels can appear one after another.

Animations are for fixed layout EPUB and HTML. Reflowable EPUB rearranges text to suit the reader's screen, which doesn't fit with motions placed on a designed page, so decide early which kind of EPUB you're making.

Use the browser preview often. Timing that seems right in your head can feel slow on screen, and seeing it play makes it easy to trim a delay or change the order.

Multi-state objects and buttons

Some interactive effects are better done with states than with motion. A multi-state object holds several versions of itself, such as the pictures of a slideshow or the before and after of a product, and a button switches between them. States work in PDF, EPUB and HTML. In print only the state that's showing prints, and in interactive PDFs the states become optional content.

Combine them with buttons to make tabs, flip cards or a small gallery without any coding. Buttons can also go to a page or web address, which is useful for a contents page or a "watch the video" link.

Keeping movement purposeful

One or two animations per spread draw the eye to what matters; a page where everything moves is tiring and harder to read. Make sure every page still makes sense if a reader's device doesn't play the animation or the video.

Keep media files reasonable in size. A digital publication full of large video files is slow to download and open, particularly on a phone.

Think about accessibility from the start. Layout's accessibility tools include alt text, a Reading order panel and EPUB accessibility metadata, and they help readers who use screen readers make sense of a page with moving parts.

Choosing the format

Fixed layout EPUB is the choice for e-book readers and stores that accept it. HTML export suits a publication on a website. Both use Layout's CSS controls, from styles and local formatting through to your own style sheets. An interactive PDF keeps buttons and forms working but treats video as an attachment.

Layout by Zaweba lets you build the printed and digital editions from one document. Design the pages once, add media and movement for the screen version, and the print PDF simply leaves them out, printing only what's showing.