Adobe Digital Publishing Suite – Streaming YouTube Video

Adobe Digital Publishing Suite – Streaming YouTube Video


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.

Screen Shot 2014-01-29 at 5.10.09 PM

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.

Screen Shot 2014-01-29 at 7.05.07 PM

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”.

Screen Shot 2014-01-29 at 7.11.00 PM

 

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.

Screen Shot 2014-01-29 at 5.11.22 PM

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.

Screen Shot 2014-01-29 at 5.11.41 PM

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.

Screen Shot 2014-01-29 at 5.11.58 PM

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.

Screen Shot 2014-01-29 at 5.12.18 PM

 

4 Comments

Add yours
  1. 3
    Kevin

    Hey man thx for the Turorial. When I attempt to finish step 7 I get an error about the size /aspect ratio. It has to be the same as the folio ratio. What did I do wrong? Can somebody help me pls

    • 4
      Mark-Anthony

      Hi Kevin,

      Sorry for the late reply. Look to your pages panel and make sure the page size is the same size as your folio’s orientation. Another thing to look for is to verify if you’ve created a single orientation or dual orientation folio in the folio builder. If you are getting this error, you may have created a dual orientation and only have a single orientation layout created in the folio builder/article. You will need to create both layouts in order to preview your folio through the Folio Builder. (Portrait and Landscape). Try previewing from the Folio Overlay panel. That may work in the meantime.

+ Leave a Comment