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?
Okay, this is strange. Just for kicks I tried something different and it works. On the YouTube website, I right-clicked on the actual video. In the context menu pulldown there was an option to Copy Embed Code. I tried that, and then pasted it directly into my InDesign layout (skipped the Object/Insert HTML step). A brand new box appeared with a video that updated and worked perfectly. The actual code is different than what I've seen before:
<iframe width="640" height="360" src="http://www.youtube.com/embed/XXXXXXXXXXX?feature=player_embedded" frameborder="0" ></iframe>
It's not in the DPS documentation, but It works and that's a relief. Hope this helps other peope who might be having trouble.
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.
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.
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.
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.
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?
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!!
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
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.
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?
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.
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!
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.