CASE.EDU:    HOME | DIRECTORIES | SEARCH

The Web Development Blog has moved to http://www.heidicool.com/blog/. Please visit me there to read the latest entries and to update your bookmarks and RSS feeds.

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: Embedding YouTube Videos the Standards Compliant Way—SFWobject 2.0

Comments

gravatar

wow, I've been using swfobject for a long time but didn't know there was a generator for it.

It's interesting but I think I'll still use the old way, writing my flash content on a div.

Great in-depth article.

Posted by Business Cash Advance on April 22, 2008 12:21 PM

gravatar

testing form to see if page name affects funtion.

Posted by Heidi Cool on April 23, 2008 09:52 AM

gravatar

Thanks for the great tips on how to use the videos you had introduced on your post.

Posted by Samuel on April 23, 2008 08:35 PM

gravatar

Great info. Always wanted to place some videos on my sites, you gave me a starting point now. 10x

Posted by hemroids on April 28, 2008 09:02 PM

gravatar

Thank you for this post on SFWobject 2.0.

I understand this new tag for Embedding.

Best regards!

Posted by Motormag on April 30, 2008 06:28 AM

gravatar

Way to go! I going to try this one later on. Nice post worth reading.

Posted by Leo on April 30, 2008 06:54 PM

gravatar

Wow! Thank you so much. I run a video site, and I pretty much gave up on compliance with standards because of the embedded videos failing, and not knowing how to fix it.

Thank you so much! I stumbled your post.

Posted by Link Building Bible on May 1, 2008 07:07 PM

gravatar

Thanks for the info.. What I like to do, however, is directly download the FLV file from Youtube using DownloadHelper (Firefox plugin)... this way, you can customize the flash player code as much as you would like.

Posted by James on May 1, 2008 07:18 PM

gravatar

This is a great edit - my only problem is that when embedding more than 1 video on the page, none will load.

Posted by Tom on May 20, 2008 05:10 PM

gravatar

WOW,You are so creative.

Posted by YouTube Downloader on May 26, 2008 04:55 AM

gravatar

cool but how do u embed it to youtube???????/

Posted by tom on June 1, 2008 02:33 PM

gravatar

I'm about ready to dwelve into the whole creation of videos for the number of sites I run, but so far all my captures and videos I have created have been of subpar quality. Yours looks good, but I don't have a mac :( maybe I will have to join the mac-side and use iShowU? I've tried CamStudio, which is free and not bad for free. I may just need to buy Camtasia for PC to do my videos and see if thats any better.

Posted by Affordable Shared Hosting on October 20, 2008 09:27 AM

gravatar

thank you Heidi!!

works like a charm :-)

I found this tutorial helpful too, particularly
(scroll down to)
Using an 'onlick' event to replace a loaded SWF with another SWF

http://pipwerks.com/lab/swfobject/load-onclick/2.0/index.html

Posted by John Dougherty on October 26, 2008 09:37 PM

gravatar

Thanks. You helped resolve a couple of issues we were having!

Posted by hemroids.us on February 13, 2009 01:00 PM

Post a comment

















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