Skip navigation
LauriL517
Currently Being Moderated

Unable to embed YouTube videos after update.

Jul 17, 2013 8:40 AM

Tags: #youtube #video #dps #ipad #indesign_cs6 #v27

I am unable to embed YouTube videos after the v27 update. I can copy the embed code from the YouTube website, go to Object/Insert HTML and paste the code. The code is there, but all I'm getting is a blank/white box and the video won't play. I've tried fidding with the autoplay settings (on/off) in the Web Overlay panel with no change in behavior. I messed around with this all day yesterday, essentially losing an entire day of productivity, and I'm on deadline. I've resorted to a workaround in which I create a hyperlink to the YouTube page that opens in the iPad in-app browser. It works, but my client won't be happy about it. I've noticed this has been an issue in the early days following a previous update (specifically v25). Could this be a recurring problem?

Branched to a new discussion.
 
Replies
  • Bob Bringhurst
    4,644 posts
    May 29, 2007
    Currently Being Moderated
    Jul 17, 2013 9:04 AM   in reply to LauriL517

    Can you confirm that the YouTube clip plays in mobile Safari? Some YouTube clips don't play on iOS devices.

     
    |
    Mark as:
  • Bob Bringhurst
    4,644 posts
    May 29, 2007
    Currently Being Moderated
    Jul 17, 2013 2:09 PM   in reply to LauriL517

    Right, if you copy the video itself, the embed code starts with http://www.youtube.com instead of //www.youtube.com, which doesn't work. I don't believe it matters whether you paste the embed code directly or use Insert HTML. I'll update the documentation. Thanks for the follow-up.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2013 4:08 PM   in reply to LauriL517

    Hi Lauri,

     

    As someone who's struggling to learn DPS, can I ask you for a point of clairifcation?

     

    When you say that you had success pasting the code directly into your layout, where exactly did you paste the code?  If it's into a frame, did you make the frame the same size as the video (or resize the video player?).

     

    When I copy the embed code (right click, copy embed code) from a YouTube video and then paste it into a layout, I get an error screen that has a message on how to upgrade to an HTML 5 player.  When I test the layout in the Adobe Content Viewer and then click on that linked message, the video starts to play normally. 

     

    Thanks for clarifiying how you made it work.

     

    Many Thanks!

     
    |
    Mark as:
  • Bob Bringhurst
    4,644 posts
    May 29, 2007
    Currently Being Moderated
    Jul 17, 2013 5:00 PM   in reply to fashionrisk1

    You just paste the YouTube embed code without anything selected, and a new frame is created that's the same size as the embedded video. (It's the same as choosing Object > Insert HTML.) Select the overlay frame and choose Auto Play so that the video is ready to be played.

     

    Don't worry about the Flash error in InDesign. Just make sure that it works in the viewer.

     

    Again, make sure that you right-click the video itself to get the embed code. Using "Share > Embed" no longer includes the correct URL to work with DPS.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 17, 2013 6:34 PM   in reply to Bob Bringhurst

    What a Eureka momement, very cool!  Thank you!

     

    I was able to create a MSO by pasting the frame created by the YouTube code into a new frame, then proceeding with a simple MSO toggle setup.  I didn't think it was possible to stream YouTube videos without using the in app browser window, but it seems to work.

     

    One note, the autoplay doesn't play the video, I'm guesing it "gets" the correct player as I'm seeing the error message on the video for a split second before the YouTube video loads.  Without using the MSO it probably wouldn't be a problem.

     

    Thanks again!

     

    -P

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 27, 2013 5:41 AM   in reply to Bob Bringhurst

    It's a very usefull trick thank you Bob!

    It's working good but I still get the "Download the new flash version..... etc". It disapear quickly when I set the video on autoplay on the folio panel but it can be clearly seen for a sec or two and it's not good looking...

    Any idea how to solve it?

     

    Thx

    j.

     
    |
    Mark as:
  • Bob Bringhurst
    4,644 posts
    May 29, 2007
    Currently Being Moderated
    Jul 27, 2013 7:28 AM   in reply to julien_bourgeois

    It's a good idea to set the overlay to Auto Play and add a manual poster image in front of the overlay. A screen shot of the video works well. This poster also appears in browse mode.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 27, 2013 11:22 AM   in reply to Bob Bringhurst

    It works!! Brilliant!

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 8, 2013 3:06 AM   in reply to julien_bourgeois

    Does using a poster get rid of or disguise the ugly alert about requiring a plug-in etc?

    cheers

    Alistair

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 8, 2013 4:25 AM   in reply to mobly

    Doubt there is a solution to this, but I have the linked/embeded video on the 2nd state of an MSO, so that it is hidden initially, when a user taps to play the video and it reveals, I get the flash/html error for a second or so. I tried adding/pasting into the html frame a poster image, but this seems to lose the html link, so the video doesnt play, this is being tested in a viewer, does this issue go away if it's uploaded? I'll test it!!

     

    cheers

    Alistair

     

    Update: So it makes no difference if I update the article in folio builder and the download in the content viewer, still get the Flash/html error for a second or so

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 8, 2013 4:48 AM   in reply to mobly

    On my project I have a video in a MSO too. As I had the problem with the flash/html error screen, I put an image (my background) of the same size as the video that I transformed into a button that does nothing. I then put it above the embed video layer (into the MSO). The video must be set to autoplay.

    And so, the time the video charges you can only see the button/poster and not the error message and then the youtube video appears.

    Hope this will do for you.

    cheers

    j.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 8, 2013 5:03 AM   in reply to julien_bourgeois

    Hi Julien, I can see how that would work for you, but my video will sit on top of a background that could change from time to time, so it would be a big job to keep changing the background poster. Also the Youtube video link that I use, means the user has to tap to play the video when it appears, you say "set the video to "autoplay" did you mean set the webview to autoplay, or is there another way to edit the HTML to make it autoplay?

    Thanks

    Alistair

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 8, 2013 5:24 AM   in reply to mobly

    I see. Then, in that case it could be nice to do the same trick but with a screen shot of the video instead of the background.

    And when I say "set the video on autoplay" I means : after you copy/paste your code into Indesign, select the frame and open the Folio Overlay panel, you'll have the html options like "autoplay", "transparent background" or "allow user intereaction" options. But you'll still have to tap on the video to make it starts.

    j.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 8, 2013 5:46 AM   in reply to julien_bourgeois

    Thanks Julien

    I don't think I have understood where you put your background image in the MSO with the video.

    So rather than a background I used a poster of the actual video, created a button (of the poster)that does nothing, and placed it above the video in the MSO.

    So that means my MSO has 3 layers, 1st for button to tell users to tap for video, then the poster image, then the actual video frame. I think you must be doing something different, as this is not working for me! Sorry for coming back to you!

     

    cheers

    Alistair

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 8, 2013 6:06 AM   in reply to mobly

    Well, in my case I have a MSO with 3 states. It's actually about music so : 1st state: Discography - 2nd state : Biography - and 3rd state : a Youtube embed video clip.

    Into the 3rd state I just have 2 layers in that order from top to bottom : 1- a button that doensn't do anything (with the same color as my background, or in your cas it could be a screen shot of the video for instance) and  2 - my html file. They must be grouped to be sure they are both into the same state.

    You just have to turn the poster image into a button actually.

     

    So if you : "1st for button to tell users to tap for video, then the poster image, then the actual video frame" just delete the button, and turn the poster into a useless button (select any button action then delete it, it will stay a button but it won't do anything.

     

    j.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 8, 2013 6:30 AM   in reply to julien_bourgeois

    Yep, that did the trick, still bit of a flash between the 2, but no horrible error message. Thank you very much for taking the time to explain.

    Cheers

    Alistair

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points