Adobe Digital Publishing Suite – Streaming YouTube Video

• by Mark-Anthony
• in Tutorials
• posted January 29, 2014

In this tutorial, I will go through the steps for streaming video within the Adobe Digital Publishing Suite. Adding video content to your DPS projects can add more value to your articles but it also adds to your folio’s file size. This also uses quite a bit of your readers bandwidth when downloading your folio. By streaming video and audio content to your DPS folio, you can now keep your folio size down in size and increase loading times and downloading speeds for your readers. Before deciding on whether or not you should stream your video content vs embedding it, you should understand that your reader may not have WiFi access or Data on their device at the time of reading your digital publication. They may also have a weak WiFi or Data signal, which will make the video buffer throughout its duration. Personally, I would recommend streaming video if the video is not crucial in moving the story or content further. If the video’s purpose is to deliver bonus content to a story, which does not affect the article in anyway, I would opt for streaming over embedding your video.

With that said, let’s go through the steps of streaming a YouTube video in a Digital Publishing Suite folio.

Download Files

Step 1:

Open the “gta5.indd” InDesign file, which is inside the Source Files available for download above. I have packaged the contents of this tutorial using InDesign. You can relink the images and install the fonts that I have used in this demo, if the document prompts you to relink files. You can install the fonts that I have used in your computer’s fonts folder or drag and drop them in your font management application. ie: Font Book or Font Explorer Pro.

Step 2:

Open your preferred web browser and paste this URL (without the quotations) in the address bar: “http://www.youtube.com/watch?v=hvoD7ehZPcM”

Step 3:

Click on the share link underneath the YouTube video and select “Embed”. Copy the embed code and switch back over to InDesign.

Step 4:

Simply, paste the code into your document by pressing the shortcut CMD + V. You will see a small grey square appear on your page. Wait for a few seconds so that the video loads. Once it loads, you can scale it to fit the screen of the PSP device. *Remember that when you scale the frame that holds the video, you will need to scale the video, which is placed inside of the frame as well. To make sure that the video is scaled at the same ratio as its frame, right-click on the video frame and choose Fitting > “fit content to frame proportionately”.

Step 5:

Now that the video and its frame are scaled, you will need to add the http:// syntax to the embed code that you have just pasted into your document. If you try to preview the video in the content viewer before doing this, your video will not play.

Right-click on the video frame and choose “Edit HTML” from the contextual menu. A dialog box will open. Now, add “http:” before the “//www…” in the embedded URL src. For example: src=”//www.youtube.com/embed/url” should be src=”http://www.youtube.com/embed/url“. URL would be the alphanumeric ID for the YouTube video. Click OK and move on to the next step.

Step 6:

After you have added the http:// sytax to the URL embed code, you will now adjust some settings for the video. These settings will determine how the video will be played via the Content Viewer and or on your tablet device.

*Note*
I have noticed that the sizing ratio of streaming video and some interactive overlays change in width and height when viewed on a tablet vs the content viewer. Be sure to test your video on an actual device and make sure that the ratio is correct. For my video to play in the correct ratio on my iPad, I had to change the width of the video to 100% and adjust its height until it filled the container properly. You can do this by repeating Step 5 and Editing the HTML for the embed code.

Select the video container and open up the Folio Overlay panel by going to WINDOW > FOLIO OVERLAYS. You should notice that your overlay panel automatically opens your Web Content Overlay. You can choose to auto play the video, set a transparent background and scale the video to fit in the container.

*When streaming YouTube and Vimeo videos, the video will not automatically play on load. The user must tap on the video before it begins to play.

Step 7:

The streaming video is now ready to preview. At the bottom of the Folio Overlay panel, select the “Preview” button. Choose, “preview on desktop” and check to see if the video loads. You can tap on the video and it should begin to play. If not, go back to step 5 and ensure that you have added the “http://” sytax to the embed code.