CASE.EDU:    HOME | DIRECTORIES | SEARCH

April 20, 2008

Embedding YouTube Videos the Standards Compliant Way—SFWobject 2.0

As video becomes easier to produce, more and more people are creating and sharing videos online. Whether you are a professor demonstrating your research, a student working on a film project, or me creating how-to instructions, you've realized that there are times when video can enhance your Web content.

Get Adobe Flash player
The resolution on YouTube is not as crisp as the original.
You can also view the video in higher resolution .mov format.

Back at the turn of the century, embedding video was complicated. Streaming required a special server, you had to decide what format(s) you wanted to stream, then you had to provide links to whatever software users might need to view your video—in case it wasn't already installed on their computers.

With YouTube, that's all changed. Now you can just go to the YouTube page for the video you wish to embed, copy the coding they provide, paste it into your html file or blog entry and publish the page.

It's just that easy—unless, like me, you care about adhering to Web standards. In that case, it requires a few more steps, but don't worry, they're not that complicated. YouTube videos can be embedded on the Web using swfobject.js—in a manner similar to the method I described last year in "Embedding Flash Objects for Internet Explorer." You can also use this method for embedding regular Flash .swf files. Just substitute the path to your .swf for the YouTube link in the instructions below.

Downloading swfobject 2.0

SWFObject 2.0 provides a significant upgrade to SWFObject 1.5—what we'd previously been using to embed Flash .swf files. To begin you will want to download the new script from the SWFobject project page. After downloading the script, you can upload it to your site, in whichever directory you prefer. Note: SWFobject 2.0 is not backwards compatible with 1.5, but the script has the same file name, swfobject.js. If you are already using 1.5 on your site—and don't plan to immediately edit all the pages that use it—you should rename the file to something like swfobject2.js or store it in a different directory so that you don't write over the prior version.

Generate the embed code for your page

While you could do this manually by following the instructions in the documentation, the SWFobject team has provided a rather handy Web-based code generator that we'll use in this example.

  1. Go the the YouTube page for the video you wish to embed and copy the embed code provided.
  2. Paste this into a blank file in Dreamweaver or your preferred editor. We won't be using this code in our page, but we'll want it for reference.

    <object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/b-tYxJcFj9I&hl=en"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/b-tYxJcFj9I&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

  3. Within this code you will see a link to the video after value=". Within this link there may be an ampersand. Escape the & by typing amp; after it.
  4. Copy this link,http://www.youtube.com/v/b-tYxJcFj9I&amp;hl=en, then go to the SWFObject 2.0 HTML and JavaScript generator v1.1.
  5. Paste the link in the box to the right of "Flash (.swf):."
  6. Near the top of the generator, choose between static and dynamic. I will be using static in this example as dynamic would require me to put additional code--specific to this video--in my header. Here on the blog my headers are part of my templates so I can't use anything that would be specific to only one entry. (The documentation offers additional information on the static and dynamic methods.)
  7. Copy the width and height values from the YouTube embed code and paste them into the dimensions boxes in the generator.
  8. Click on "more" in the SWF definition box if you like to edit additional attributes.
  9. In the HTML definition box choose the version of XHTML or HTML and character encoding you use on your Web site.
  10. Click the "Generate Code" button.
Embedding the video in your page
  1. Copy the script code found with the head of the generated output.

    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
    swfobject.registerObject("myFlashContent", "9.0.0");
    </script>

  2. Paste this into the head of your HTML file or blog templates. Note: Because I have already been using the previous version of SWFobject on this blog, I named my script swfobject2.js before uploading it to the server. Therefore I must also change the name in this code then add it to the code that is already in my templates. Thus my files will include:

    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript" src="swfobject2.js"></script>
    <script type="text/javascript">
    swfobject.registerObject("myFlashContent", "9.0.0");
    </script>

  3. Copy the object code found within the body of the generated output.

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="425" height="350" id="myFlashContent">
    <param name="movie" value="http://www.youtube.com/v/b-tYxJcFj9I&amp;hl=en" />
    <param name="wmode" value="opaque" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/b-tYxJcFj9I&amp;hl=en" width="425" height="355">
    <param name="wmode" value="opaque" />
    <!--<![endif]-->
    <a href="http://www.adobe.com/go/getflashplayer">
    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
    </a>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
    </object>

  4. Paste this into the place in your file where you would like the video to appear.
  5. Upload the file to your server and watch the video!
SWFObject Resources
About the Embedding YouTube Videos the Standards Compliant Way video

The video screen captures were recorded using iShowU, a program I discovered yesterday afternoon. The scenes were pieced together, and audio was recorded and added in iMovie. As this was my first time experimenting with iShowU some portions of the video are a bit wobbly, but overall I found it very easy to use. I expect my skills will improve with time.

I'll post more about the process as I become more familiar with the software. Members of the Case Western Reserve University community interested in producing similar instructional videos may also wish to visit the Freedman Center which offers tools and instructions on this and related topics.

StumbleUpon Toolbar Stumble It! AddThis Social Bookmark Button


Posted by: Heidi Cool April 20, 2008 07:24 PM | Category: HTML , Heidi's Entries , How-to , Javascript , Web Standards , video

Trackbacks

Trackback URL for this entry is: http://blog.case.edu/webdev/mt-tb.cgi/17580

Comments

Post a comment

















Posted by: hac4 (Heidi Cool) April 20, 2008 07:24 PM | Comments (0) | Trackback