I love embedding YouTube videos in my digital publications using InDesign and Adobe DPS. They offer a great way to save lots of megabytes when designing your interactive document. And with todays HD options and broadband streaming, it seems like more and more people jump on the “stream train”.

But unfortunately we’re still not living in a perfect world where it’s no longer necessary to safely remove a USB drive, Comic Sans isn’t installed by default or where you’re not online all the time. And it’s for that last scenario that we want to be careful  when automatically trying to stream video. Because we want to control what the users sees during his reading experience. The following workflow will show you how you can hold off from automatically streaming by not using the “Auto Play” function and using a custom poster.

Step1: getting the video into InDesign

Embedding a YouTube video (or video from other streaming services) has become so easy ever since CS6 came out. Follow these steps to set you on your way:

1. Go to YouTube.com and choose your favourite video clip (preferably something with cats).
   
2. Click the Share tab
   . 
3. Click the Embed tab.
4. Complete the embed code by adding “http:” or “https:” (both without quotes) to the embedded url.
5. Choose the appropriate video size form the available options.
6. Make sure “Use old embed code” is deselected.

Now copy the code and switch back to InDesign. Now hit the Paste command and give InDesign a few seconds to think. Et voilà, there’s your YouTube video as a Web Content Overlay in the Folio Overlays panel. But wait, what’s up with that poster image?

What’s happening is that some of the HTML is loading into InDesign, resulting in a type of error message saying that the program you’re currently using (InDesign) is not suited for video playback. The video would still start the moment you tap this poster image on the iPad but it’s just so horrible to look at. Even when you have the item on Autoplay would you still see the poster image while loading in the video. So imagine being offline and seeing that poster image in your design the whole time?

Step2: changing the poster image

Let’s go back to the basics here and ask ourselves, “what is a poster image?”. A poster image is a custom image that represents certain interactive content (e.g. a video clip) and is inviting us to interact with that content. This means that the poster image is what “sells” the object and should persuade the user to start interacting with it.
I personally don’t automatically load in the HTML of a video stream service, meaning I don’t click the “Auto Play” option in the Web Content options. This is because I want to avoid the mobile device to look for a signal to start loading in HTML while you might actually be offline. This can only result in delays and potential “Error Loading Content” messages.

Follow these steps to help you personalise the experience:

After having pasted in the HTML, move the frame into position in your layout.

1. Set all the settings you have to set in the Web Content options of the Folio Overlays panel, but don’t select the “Auto Play” feature.

    

2. Now create an extra graphic that holds some text or an icon that says something along the lines of “Are you online? Then click here to watch this crazy cat video!”. You can prepare a Photoshop graphic for this, or even use native InDesign objects to build this graphic. This will act as your poster image.
3. Move the poster image on top of the HTML frame to cover it up.

What will happen next

You might be familiar with the hierarchy of objects within a folio i.e. static objects are pushed to the back while interactive objects get promoted to the top of the stack. So does this mean your poster image will be pushed to the back once you generate a preview? InDesign considers Web Content that isn’t activated yet as static content, meaning that the poster image will remain in the foreground. When you tap the poster image (to start the HTML and thus load in the YouTube stream) you’re actually tapping the Web Content frame in the background. And the moment the HTML is loaded in it becomes interactive and gets promoted to the foreground. Pretty simple huh?