Summary: Publish YouTube video into your presentation by using web objects.
Difficulty: Easy/Medium
Update:Updated to include the ‘Standard’ recommended method for inserting YouTube video and the previously described ‘Easy’ method. Only the Standard method will work in all common browsers online.
Video can bring your presentation alive and help add that needed punch to engage your learners.
In this first of a two-part series, we are going to look at how to add YouTube video to your presentation.
Why Use YouTube?
- Well for one thing, there is a such a vast supply of material on YouTube that there may well be something that you can use to illustrate your course.
- Second, you might want to upload your own content on YouTube and rely on their streaming technology rather than insert video into Presenter ‘09 directly. The advantages with that include using less of your own server space and increased upload times each time you publish your presentation. When you insert YouTube video into Presenter, you are not actually importing any video, just a link.
Let’s have a look at an example of integrating YouTube content into a presentation.
Demo
This demo shows a full-screen video.
Step-By-Step
The “traditional” way to add YouTube or indeed any embedded online video to Presenter is to copy the embed code from the online video site and then paste that into an index.html file ready to be imported as a web object. There is an easier method but it seems that this won’t work in Internet Explorer when viewing the Articulate presentation online. I have described both methods but if you go down the ‘easy’ route, then bear in mind that your online viewers using Internet Explorer may have problems. If you incorporating YouTube content to a locally run course, then you should be fine. Firefox and Google Chrome work in all scenarios.
Standard Method
- Open Notepad and paste the following code. Save your file in a new empty folder and call the file index.html.
- Go to the YouTube page that hosts that video you want to embed and copy the embed code that you’ll find to the right of the video as shown in the picture below:
- Paste the embed code in the place indicated in the index.html file you created earlier so it looks like this:
- If you want your video to be full slide, change the height and width settings to 690 and 510. You’ll need to do this twice. Otherwise indicate what size you want the video to display at.
- If you want to change the background color of the slide which holds the video, then change the body bgcolor to white, for example. You can use a hexadecimal value for your color like #FFFFFF.
- Save the index.html file. It is now ready to be inserted as a web object.
- Now go to your PowerPoint file and decide where you want your video. If you haven’t yet created a slide, you’ll need to do that now.
- Then select Articulate -> Web Object. This will bring up the Insert Web Object dialog box.
- Click on the yellow box just to the right of the URL box. This will open another dialog box prompting you to point to the index.html file you created before. Navigate to the folder which contains the index.html file and then click ok.
- Because your web object will not stretch to fill the slide when you publish, it is a good idea to publish at optimal size. This makes sure that all your viewers will see the same thing irrespective of browser size. Go to Articulate -> Player Templates -> Other -> Presentation Size: Lock presentation at optimal size.
- Click OK and you are ready to publish.
<html> <head> <title> YouTube Video Web Object Template</title> </head> <body bgcolor="black"> <p align="center"> //Paste the YouTube embed code after this line //Paste the YouTube embed code before this line. </p> </body> </html>
<html> <head> <title> YouTube Video Web Object Template</title> </head> <body bgcolor="black"> <p align="center"> //Paste the YouTube embed code after this line <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/jcIPLiGHozc&hl=en&fs=1&rel=0"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/jcIPLiGHozc&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> //Paste the YouTube embed code before this line. </p> </body> </html>
Easy Method
- Identify the movie you want to insert. Sounds obvious but that is where we need to start.
- Go to the YouTube page that hosts that video and copy the URL link that you’ll find to the right of the video as shown in the picture below:
- Now go to your PowerPoint file and decide where you want your video. If you haven’t yet created a slide, you’ll need to do that now.
- Then select Articulate -> Web Object. This will bring up the Insert Web Object dialog box.
- In the box for the URL, paste the YouTube URL you have just copied from the YouTube web site.
- Then, BEFORE, you close the dialog box, make the following two edits to the URL. This will make sure that just the video appears in the web object and not the whole YouTube page.
- Remove
watch?v=
and in its place put
v/
- Add
&index=18
to the end of the URL. - Decide how large you want your web object to be. You can click Full Size now and edit it later by dragging the sides of the rectangle to the size and position you want on the slide.
- Click OK and you are ready to publish.
So if the original YouTube link is:
http://www.youtube.com/watch?v=jcIPLiGHozc
then the edited URL will be:
http://www.youtube.com/v/jcIPLiGHozc&index=18
Here is the same demo but this time using the ‘easy’ method. Note that this might not display correctly in Internet Explorer.
Notes
Of course, don’t forget that your YouTube video will only play if your students are online. You cannot use online videos for presentations that you intend to play on CD ROM unless you make it clear to the learner that they will need to be online while they watch the CD ROM presentation.
In the next post, we’ll change directions and look at how you can post your Articulate presentation to YouTube!
Great post! Those edits to the URL are key, and I could not figure this out on my own. This will help me a lot.
I’m looking forward to the next post. I’ve had to publish several Articulate demos to YouTube, and I’m curious what method you use — because my method is kind of cobbled together.
Heather
Nice tip, Dave! I’m sure a lot of our customers will appreciate this.
The demo did not work on my computer! The screen was blank, “LOADING…” flashed for a second, and the screen remained blank.
Any technical specifications for ensuring the video plays? I have the latest flash player.
Hi Laura, if you mean that the YouTube video is not loading, then yes I agree. The video is not working anymore on YouTube either. I’ll wait a bit to see if this is a YouTube problem or if the video has been deleted, and if so, put another one it its place. Thanks for bringing this to my attention !
YouTube up and running again!
There seems to be a problem viewing this presentation in Internet Explorer. I’ll post some alternative instructions and alternative demo shortly.
David, thanks for the great posting! I was wondering if you found a fix for view the videos in
IE? Does one version work better than another? Thanks, again, for sharing your expertise!
Hi Christine,
Thanks for your comment. If you want it to work in Internet Explorer, then you’ll need to go with the first Standard method. You can actually change the size of the embedded video to be 100% to make sure it is full slide. The two demos have been done differently. You should find that the first works fine in IE and the second doesn’t. Hope that helps. Regards
HI Dave,
Searching around the web, I found a way to disable related videos that will show up at the end of the video. Just add
&rel=0
and that will block the related videos from occuring.
HI,
Just follow-up. I should mention that the &rel=0 works for the easy method (I haven’t figured out yet how to disable related videos for the “traditional” method. Also, to answer Christine’s question, I have no problems viewing both methods in IE8.
HI,
Sorry, I keep adding notes, but I figured out how to disable the “show related links” for the traditional method as well. You need to make two edits. Add
&rel=0
at the end of “value = . . .” and at the end of “embed src= . . .”
So, if the code for YouTube is
value=”http://www.youtube.com/v/rnLWSC5p1XE&hl=en&fs=1
embed src=”http://www.youtube.com/v/rnLWSC5p1XE&hl=en&fs=1
change it to
value=”http://www.youtube.com/v/rnLWSC5p1XE&hl=en&fs=1&rel=0
embed src=”http://www.youtube.com/v/rnLWSC5p1XE&hl=en&fs=1&rel=0
The only thing you will need to adjust is the size of the web object in Articulate. The two don’t match up for some reason, but that might just be my own technical error.
Hi Joe, Thanks for sharing! That is a great tip. I’ll mention that in the article.
Thank you !