Tip of the Week: Including YouTube Videos in Interactive Documents

There are three new Links panel icons in InDesign CC that you'll see when working with Adobe Stock images. Here's what they mean.

Ever wish you could include YouTube content in an interactive document exported from InDesign? You can do it if you export to EPUB 3 (fixed-layout or reflowable) or Publish Online.

First, go to YouTube and find the video you want. Then in the controls under the video, click Share, and then Embed.

indesign-tip-youtube-video

Copy the full embed code. Switch to InDesign. Make sure nothing is selected, and then paste. At first, you’ll see a small square while InDesign is checking the embed code.

indesign-tip-youtube-video-2

Then you’ll see a full-size frame where the video will be. Don’t worry if it shows an error message. That won’t show up in your exported file.

indesign-tip-youtube-video-4

Position the video frame where you want it in your layout.

indesign-tip-youtube-video-5

You can preview the video in the EPUB Interactivity Preview Panel.

indesign-tip-youtube-video-6

Then export to EPUB 3 and/or Publish Online. Note that the EPUB will not pass a validation check because the YouTube video is a remote resource not listed in the content.opf file inside the EPUB package. But as long as you have an internet connection, the video will play inside the EPUB.

indesign-tip-youtube-video-7

To see an example, check out this Publish Online document, featuring the silly but incredibly popular Pen-Pineapple-Apple-Pen song.

By the way, this same trick for Vimeo videos too. Just click on the Share button, then click on the embed code, copy it, and paste in InDesign.

ppapvimeo

Also, you can click on Show Options and decide whether to include things like the title, byline, text link, etc, before copying the code.

ppapvimeo2

Bookmark
Please login to bookmark Close

This article was last modified on November 11, 2021

Comments (22)

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. The video plays when exporting an interactive pdf or using publish online, but I want the static frame to show, rather than show an error message, so that if people download a pdf, they will at least see the video picture, and not an ugly error message. Ideas?

  2. Ben Grimshaw

    To fix the dimensions of your video inside Indesign,
    1. Copy and paste the iFrame code into indesign and wait for the video to appear.
    2. Once it has appeared use the direct selection tool to select the video that’s inside the rectangle bounding box and give it new dimensions (I reduced my video, so I had a small video rectangle inside a larger bounding box).
    3. THIS IS THE IMPORTANT BIT – – – DO NOT resize the original bounding box, manually or by pressing ‘Fit frame to content’
    4. change the anchor point to align your video on the page, the send it all to the back to it doesn’t interfere with any other interactive elements on the page. The large bounding box won’t be visible when you publish. This worked for me.
    THanks

  3. Benjamin Painter

    Hello, I’m wondering if anyone else has encountered this: I’ve setup the embed code in my reflowable ePub 3 according to this tutorial. It worked great until after my export. I have tried iBooks, VitalSource, and Readium and no matter what, the video is not displaying in my book at all. Instead, what I see is the text of my document as if there was no video embedded at all. I’m sure it’s an export setting or something, but now matter where I’ve looked the answer still eludes me. Any help is much appreciated. Thanks!

  4. Deirdre Boyd

    Mike – did you click anywhere first, even on the area outside the page? You need to click nothing at all before pasting, even though that does not feel natural.

  5. Helle Maach

    Hi Mike,
    Does this only work if you have CS6 or later?
    I have CS5 and it just seem to paste the code as text or what am I doing wrong?

    Thanks!

  6. Deirdre Boyd

    Can you help? I followed your great tip BUT want the video to fit into a smaller frame. I clicked on the fit-to-frame option and the video appears to fit into this – but when published online you can see only part of the video (ie, a portion same size as frame out of the original). You can see problem here, on page 11:
    https://www.recoveryplusjournal.com/recovery-plus-journal-nov-2017/

    1. Deirdre, try changing the width and height dimensions in the embed code to match the size of the frame in InDesign.

      <iframe width="624" height="356" …

      1. Deirdre Boyd

        THANK YOU! It took slight experimenting: measurements in mm x 3 gave what was needed. Many thanks.

  7. a snag. the copy & paste works just fine, but then when I export to Epub (Fixed) it shows the video for a second without playing then goes blank white. no controls, nothing. ????

    1. Same issue here. Works in Publish Online, but not the FXL ePub.

      1. Same here….. any tips?

      2. Actually, it works when you view the epub in Digital Editions, but not iBooks 1.12.

  8. Epub Video

    Hi,
    I had the same problem. It just worked when I deployed the book somewhere online and jut with readium cloud reader.

  9. Hagay Giller

    Hi,

    I’ve embedded a youtube video in my file and then tried to create a button that hides the video when it’s clicked. However, the video still plays while hidden and the sound is still heard. Is there a way to control playback so that the video will pause once the button is clicked?

    Thanks!

  10. Marisa Vitiello

    This is great. However, when I do this (from Youtube or Vimeo) and then size down my video (using scale or dragging) it looks fine but when I publish online I’ve got a small corner of my video and no controls. Any ideas??

    thanks

    1. Realizing this is a year old, but posting in case someone spots and can advise on if they found an answer. Thanks!

      1. Nevermind. I got lazy and posted before reading all posts. Please excuse :)

  11. How to put YT into interactive PDF ??

    1. Years ago I used to show this workaround involving a Flash widget, but at this point I’d say either it probably won’t work or it’s just not worth the trouble. https://prsync.com/adobe/youtube-widget-for-acrobat-updated-finally-347325/

    2. David Blatner

      kolo: I don’t think that is currently possible.

  12. Hi Christina! Yes, you could use the same steps to embed a vimeo-link. Thanks!

  13. Christina Bolander

    Thank you! It’s the same thing when to embed vimeo-link also? All the best, C.