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

Bookmark & Share:
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • LinkedIn
  • FriendFeed
  • MySpace
  • email

    Share on Google Buzz

18 Comments »
  1. 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.

    Comment by Business Cash Advance — April 22, 2008 @12:21 pm

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

    Comment by Samuel — April 23, 2008 @8:35 pm

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

    Comment by hemroids — April 28, 2008 @9:02 pm

  4. Thank you for this post on SFWobject 2.0. I understand this new tag for Embedding. Best regards!

    Comment by Motormag — April 30, 2008 @6:28 am

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

    Comment by Leo — April 30, 2008 @6:54 pm

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

    Comment by Link Building Bible — May 1, 2008 @7:07 pm

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

    Comment by James — May 1, 2008 @7:18 pm

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

    Comment by Tom — May 20, 2008 @5:10 pm

  9. WOW,You are so creative.

    Comment by YouTube Downloader — May 26, 2008 @4:55 am

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

    Comment by tom — June 1, 2008 @2:33 pm

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

    Comment by Affordable Shared Hosting — October 20, 2008 @9:27 am

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

    Comment by John Dougherty — October 26, 2008 @9:37 pm

  13. [...] did the editorial slant of the site. Instead of just posting basic tutorials on cropping images or embedding YouTube videos with swfobject.js, I started writing articles about content, marketing, SEO and social media such [...]

    Pingback by Web Development Blog: Heidi Adams Cool » Welcome to the new home of the Web Development Blog! — February 23, 2009 @4:02 pm

  14. [...] this was written, SWFobject2.0 has been released. Read "Embedding YouTube Videos the Standards Compliant Way—SFWobject 2.0" to learn more about using the updated version for embedding videos and other .swf files. [...]

    Pingback by » Embedding Flash Objects for Internet Explorer | Web Development Blog: Heidi Adams Cool — June 8, 2009 @11:54 pm

  15. [...] written, SWFObject2.0 has become the recommended method for embedding Flash files. Learn more at "Embedding YouTube Videos the Standards Compliant Way—SFWobject 2.0." (This method can be used for a variety of .swf files, not just [...]

    Pingback by » Valid code for using Flash animations on the Web | Web Development Blog: Heidi Adams Cool — June 9, 2009 @12:02 am

  16. Twitter Comment... Need 2 embed video? How To: RT @hacool: @misscharlie I use swfobject 2 embed video on regular sites & wp installs. [link to post] - Posted using Chat Catcher ...

    Trackback by FormsOfPlato (FormsOfPlato) — July 20, 2009 @7:48 pm

  17. i love to applaud the article on you tube videos sharing with information each other around the wrold. In these days, the videos are also getting to attract more visitors to the website & having more stability to the site . .

    Comment by web 2.0 development company — November 7, 2009 @8:52 am

  18. This is a fantastic solution.. I am a web administrator and half the office do not have flash so this is a great fix to avoid browsers web experience jamming up due to lack of flash plugins :-)

    Comment by David — April 12, 2010 @12:19 pm

Leave a comment

RSS feed for comments on this post. | TrackBack URL