How to Embed a YouTube Video into my Topic

[MkMr]

Hello,

I was wondering what I need to do to put a link to a YouTube video into my topic? Basically I want a preview of the video which when clicked runs it.

YouTube shows the following "code":
<object width="853" height="505"><param name="movie" value="http://www.youtube.com/v/Qr7_jUQmdhE&hl ... ram><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Qr7_jUQmdhE&hl ... rel=0&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="853" height="505"></embed></object>

How do I make that "active" (so it works!) in the .htm file?

Thanks in advance!
Mark

[RamonS]

One cheesy way is to insert a "picture" and have the URL be the URL to the video. The browser usually figures out on its own that it is a video and which dimensions it has, but it can only do that after it loaded the content.

Alternatively, you use the internal text editor to place the code provided in exactly the spot where you want the video to show up. With a little luck Flare will not destroy this once you compile the help.

Even if that works, you may run into issues with security warnings and such since this will be web content inside of a CHM. You may be better off just adding a plain simple hyperlink and have the user click on it to open it in a web browser. For that you just use http://www.youtube.com/v/Qr7_jUQmdhE&hl ... rel=0&hd=1 as URL (or whatever you want to link to). Keep in mind that YouTube videos are Flash videos and for that to work you need to have the Adobe Flash player installed. I don't know if the plugin works inside of a CHM.

[MkMr]

Thanks, Ramon. I think I'll go with image/link version. It turns out that the CHM will run the flash video in place.

Mark

[Lutic]

Try replacing all occurrences of & with & in the links using flare text editor or notepad.

[Madcap Guru]

I have seen issues with the HTML viewer not always playing SWF images, depends on how your IE browser security is set, This is because the HTML help viewer is so old, it predates the idea that anyone would want to put in a video clip

[MarinaMichaels]

I have the same question, but Flare keeps objecting to the code I am trying to use. Here is what I want to embed (using the text editor):

Code: Select all

<object style="height: 390px; width: 640px;"> 

                                <param name="movie" value="https://www.youtube.com/v/Zau20vxhGV4?version=3&rel=0&feature=player_embedded&enablejsapi=1&feature=player_embedded&autoplay=1"> 

                                <param name="allowFullScreen" value="true"> 

                                <param name="allowScriptAccess" value="always"> 

                                <embed src="https://www.youtube.com/v/Zau20vxhGV4?version=3&rel=0&feature=player_embedded&enablejsapi=1&feature=player_embedded&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="344"> 

                            </object> 

But Flare won't save it, saying the = in rel=0 (in the first param declaration) is expected to be a ;.

I can just make a hyperlink and that works, but I kind of wanted the visual appeal of the video. Any ideas how to make this work?

[LTinker68]

I think your params and embed tags need to be self-terminating. For example,

<param name="movie" value="https://www.youtube.com/v/Zau20vxhGV4?v ... autoplay=1" />

Or else add closing tags for them (e.g., </param>).

That may not be what's causing the problem, but it's one thing to eliminate.

[wclass]

Not sure it this will help as I embed my videos into webhelp, not CHM, but here goes.

I had similar problems with embedding local flash files created by Camtasia - Camtasia generates the object code that you copy to your HTML file, but Flare won't accept some of the parametes.

However, when I used my favourite text editor (UltraEdit) to troubleshoot the problem, all was OK - I could save and preview the embedded video without error outside of Flare. So I pushed ahead and compiled the Flare project and the final output worked! It looks like it's a Flare XML editor issue, not an output (webhelp)one. I can't test your exact scenario as I don't have access to YouTube at work, but for what it's worth, I can embed flash files into Flare projects.

[MarinaMichaels]

Thanks for your thoughts. I had had the same idea about the self-terminating elements, but making them self-terminating didn't work. I might try the </param>, though.

I somehow managed to get it to work, but I am getting error messages (though it compiles and runs fine), so I will continue to debug this.

[MarinaMichaels]

I've spent a little more time trying to debug this and I still get the error message. I can only open this file in the text editor, not in the WYSIWYG editor, and inexplicably the font used to display the text on the page (before the embedded video) is not what is defined in the style sheet.

I've tried all the suggested solutions (and thank you very much for your time!), but to no avail. I think my next step is to submit this to tech support.

[retswerb]

Marina, did you get any help from tech support on this? I'm trying to embed a screencast.com video, with the same maddening result. I've spent so long trying to get this to work, I'm about to tear my hair out!

Actually I would be just as happy to use Flare's own embedded video function, but that only results in video that embeds with no player controls, thus no way to play the video. That's an issue which has been documented here in the forums for some time as well, with no resolution...

[MarinaMichaels]

Yes, tech support came through with the correct code that worked without compiler errors. Here is the code they provided:

Code: Select all

<object width="640" height="464"><param name="movie" value="https://www.youtube.com/v/Zau20vxhGV4?version=3&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/Zau20vxhGV4?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="640" height="464" allowscriptaccess="always" allowfullscreen="true"></embed></object>

However, I ended up making it a link instead, though I carefully inspected the code from tech support to make sure it was right:

Code: Select all

<a href="https://www.youtube.com/v/Zau20vxhGV4?version=3&rel=0&feature=player_embedded&enablejsapi=1&feature=player_embedded&autoplay=1">Getting Started</a>

Edit: when users click on the link, the video plays right there inside the help, which is what we wanted.

Edit #2: I am using these links in WebHelp.

[Lionel]

Hi,

I'm using Flare v.8 and tried to copy the code their gave you and replace it with my link but it won't work in HTML5 help. Any ideas?

Many thanks,

Lionel

[NorthEast]

Have your tried the embed code that's generated by YouTube (i.e. Share > Embed) ?