Summary: Publish YouTube video into your presentation by using web objects.
Difficulty: Easy/Medium
Update:

Updated December 2010

YouTube

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.

Full screen YouTube demo

View Demo

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. Another method requires you to simply post a URL in the web object address in Presenter. This was unsupported in Internet Explorer but Google have updated their embed code and now appears to work fine. I have described both methods and included both the “old” easy method and the “new” easy method. The new Google code is still in beta but once it has been fully released, I’ll remove the “old” easy method. If you go down the ‘easy’ route, then bear in mind that your online viewers using Internet Explorer may have problems so please test first. 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

  1. Open Notepad and paste the following code. Save your file in a new empty folder and call the file index.html.
  2.  

    <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>
    

     

  3. 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:
  4. youtubeembed

  5. Paste the embed code in the place indicated in the index.html file you created earlier so it looks like this:
  6.  

    <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>
    

     

  7. 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.
  8. 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.
  9. Save the index.html file. It is now ready to be inserted as a web object.
  10. 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.
  11. Then select Articulate -> Web Object. This will bring up the Insert Web Object dialog box.
  12. 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.
  13. youtubeselectfolder

  14. 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.
  15. Click OK and you are ready to publish.

 

“Old” Easy Method

  1. Identify the movie you want to insert. Sounds obvious but that is where we need to start.
  2. Go to the YouTube page that hosts that video and click on the Share button that you’ll find just below the video. Copy the URL:

  3. 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.
  4. Then select Articulate -> Web Object. This will bring up the Insert Web Object dialog box.
  5. In the box for the URL, paste the YouTube URL you have just copied from the YouTube web site.
  6. 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.
    1. Remove
      watch?v=
      and in its place put

      v/

    2. Add
      &index=18
      to the end of the URL.

    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

    Insert Web Object Dialog Box

  7. 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.
  8. Click OK and you are ready to publish.

Here is the same demo but this time using the ‘easy’ method. Note that this might not display correctly in Internet Explorer.

Full screen YouTube demo

View Demo

“New” Easy Method

Thanks to Will Findlay who brought this to my attention in a comment to this article.

  1. Identify the movie you want to insert.
  2. Go to the YouTube page that hosts that video and click on the Embed button that you’ll find just below the video. Copy the code and paste into Notepad:
  3. What you actually need is just the URL that is highlighted in the red box in the image below but it is not easy to just copy part of the code, so you need to paste first in Notepad and then copy the URL


  4. From the code that you have pasted in Notepad, just select and copy the URL that is indicated in the red box above.
  5. 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.
  6. 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.
  7. Click OK and you are ready to publish.

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!


This post is tagged

24 Responses

  1. Heather says:

    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

  2. Nice tip, Dave! I’m sure a lot of our customers will appreciate this.

  3. Laura says:

    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.

    • daveperso says:

      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 !

  4. daveperso says:

    There seems to be a problem viewing this presentation in Internet Explorer. I’ll post some alternative instructions and alternative demo shortly.

  5. Christine says:

    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!

  6. daveperso says:

    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

  7. joe says:

    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.

  8. joe says:

    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.

  9. joe says:

    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.

  10. Patrick says:

    Thanks for this, very useful. It may sound a bit odd but is there a way of embedding the Traditional way and muting the sound from the orginal video?

  11. Stephanie says:

    I am getting a Security Warning and it will not load the file – IE of course. Any other folks experience that?

  12. Stephanie says:

    FYI – the more complex solution (above) worked, creating an index file with the embedded code in it.

  13. Tony says:

    There is also a way of making a youtube video scale to fit the browser window to avoid the need to publish the presentation at optimal size. To do this following the standard method use the html below:

    Youtube video

    Also change the height and width attributes in the embed code to be 100% in both locations:

    e.g.

    <html>
    <head>
    <title>Youtube video
    <style type=”text/css”><!–

    body {
    height: 100%;
    margin: 0;
    }

    html {
    height: 100%;
    overflow: hidden;
    }
    –></style>

    </head>
    <body>

    <object width=”100%” height=”100%”><param name=”movie”
    value=”http://www.youtube.com/v/jcIPLiGHozc?fs=1&rel=0&hl=en_GB”></param><param
    name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/jcIPLiGHozc?fs=1&rel=0&hl=en_GB”
    type=”application/x-shockwave-flash” allowscriptaccess=”always”
    allowfullscreen=”true” width=”100%” height=”100%”></embed></object>

    </body>
    </html>

  14. Will Findlay says:

    Youtube has a new “iframe embed code” (in beta) that provides a newurl scheme that might make things easier, e.g. the iframe url for this video (without related videos):

    http://www.youtube.com/watch?v=byRIwDk21sw

    is this:

    http://www.youtube.com/embed/byRIwDk21sw?rel=0

    (They provide this in the embed code if you pick the iframe version of the code).

  15. John Trone says:

    Is this working in IE 8 for folks?

    My youtube videos play via Prensenter in FireFox, but not in IE8. I am using the standard method, not the “easy” method.

  16. John Trone says:

    Please ignore my last post. I have things working in IE8 now. Must have been user error on my part.

  17. Birgit Schmidt says:

    Is there a way of getting the video to automatically play? Do you have to rely on user interaction?

  18. daveperso says:

    Hi Birgit, I think it might be possible but I haven’t found out how yet. Maybe somebody else can help.

  19. The film is directed by economist Peter Navarro, a professor at the University
    of California. In Africa, the slippers on the villagers’ feet are all made in China. We have employers’ as well as employees’ rights established.

  20. China’s overall economy is growing rapidly, but they face almost insurmountable problems in dealing with population growth, economic inequality among their citizens and the inability or unwillingness of the Chinese government to effectively deal with a myriad of issues concerning their production and manufacturing processes. They have adapted to the innovations in technology that drives world demands, and have become an attractive source for businesses both small and large to utilize in commerce. The resulting innovations can have massive spillovers for a company.

Leave a Reply

Categories