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

• SWFObject devblog
• Active Content Developer Center
• IE Automatic Component Activation Now Available (Internet Explorer users will no longer have to click to activate videos embedded using the static method.)
• SWFObject discussion group
• SWFObject 2.0 Documentation
• YouTube JavaScript Player API Reference

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.

It's funny how people get the same idea at the same time. Last week I had two different people ask me how they could use a slideshow instead of a still picture on their Web site. Many people find that one image doesn't exemplify all of the qualities of the department's site. That was true for me when I was building the Marketing and Communications site. There wasn't one image that would symbolize our group so I used Flash to make a slideshow highlighting different facets and activities of the university. This slideshow appears on our main page in place of the usual photograph.

If you are already familiar with Flash you may want to use this option. If you've never used Flash, you will probably find it easier to use Javascript. There are many scripts available that only require minor edits.

Using Javascript to create a slideshow

If you do a Google search on "javascript slideshow" you'll find all sorts of options. For today's project I chose to use the Multi image slideshow script I found from http://javascriptkit.com/. This is the slideshow you will see on the right. You don't need to be a Javascript whiz to use this script. Anyone comfortable with the basics of HTML should be able to make the edits fairly easily.

• To use this script you will first want to prepare a series of .jpg images that are sized to the same dimension. Upload these to the same directory as the page on which the slideshow will appear.
• Copy the script from the box on http://wsabstract.com/script/script2/multishow.shtml and paste it into the location it should appear on your Web page.
• Edit the script.
  • This script allows you to have multiple sets of slides and links to each set. Since I was only using one set I deleted the code for the two extra sets, changed "3" to "1" in "#1 SPECIFY number of slideshows" and removed the links that came after the end of the script. The comments in the script make it easy to understand which sections you can edit or remove.
  • Under "#2 SPECIFY interval between slide" I left the interval at 2000 but you could easily modify this if you want the pictures to change more slowly.
  • Add or delete paths to images as necessary. I used 5 images (rather than 3) so, following the same format as in the script, I added my 4th and 5th images in the areas under "#4 SPECIFY image paths of 1st slideshow" and "#5 SPECIFY urls of 1st slideshow."
• Save your .html file, upload it to the server and see if it is working. If it isn't working check to make sure you specified the right paths to your images and didn't accidently delete any necessary code.

P.S. Those of you know pay attention to such things may have noticed that this script causes some validation errors. I'm going to see about cleaning it up tomorrow.

P.S. P.S. For those of you anxious to update your sites, I will begin distributing the appropriate new logo files for Web Development on July 1st. I am preparing and testing the files now.