What is the jQuery SWFObject plugin?

The jQuery SWFObject plugin is an addon for jQuery that offers SWFObject's unique functionality of embedding Flash content using the internal jQuery API.

What is SWFObject?

SWFObject is an easy-to-use and standards-friendly method to embed Flash content reliably within all major browsers. You can learn more about SWFObject here.

What is jQuery?

jQuery is a small but power-packed bundle of javascript functions that make writing javascript quick and simple. Selecting elements on your page is like using CSS, learning and using functions requires minimal fuss, and the learning curve is sometimes described as "zero". You can learn more about jQuery here.

How do I use jQuery SWFObject plugin?

It's easy. Tell the jQuery SWFObject plugin what flash document you want to use and where you want to put it. It works using jQuery selectors, like this:

<script src="jquery.core.1-3-2.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.swfobject.1-0-5.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { // #flashTest1 is the selector $('#flashTest1').flash({ // test.swf is the flash document swf: 'test.swf' }); }); </script> <div id="flashTest1"></div>

When we're done, that result should look something like this:

If you like, you can download this example here.

You can also use flashvars with the jQuery SWFObject plugin. It works using like this:

<script src="jquery.core.1-3-2.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.swfobject.1-0-5.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { // #flashTest2 is the selector $('#flashTest2').flash({ // test_flashvars.swf is the flash document swf: 'test_flashvars.swf', // these arguments will be passed into the flash document flashvars: { name1: 'jQuery', name2: 'SWFObject', name3: 'Plugin' } }); }); </script> <div id="flashTest2"></div>

When we're done, that result should look something like this:

If you like, you can download this example here.

Want to learn more about how it works?

Please visit our features section to learn how to use this plugin, or visit our examples section to see these and more examples of this plugin in action.

Ready to try the jQuery SWFObject plugin?

Please visit our downloads section.