Provide SWFObject Embed Code to Your Visitors

Sites like YouTube make it easy to share videos by providing pre-configured embed code for visitors. If you'd like to offer embed code to your visitors, SWFObject's static embed method is the most reliable cross-browser and standards-friendly way to embed a SWF. A sprinkle of JavaScript in your page can automagically 'print' SWFObject embed code that your visitors can copy.

Step one: embed the SWF in your page so the visitor can see it

It's a good idea to embed the SWF in your own page so visitors can see it for themselves. Since we plan to use JavaScript to write out the visitor's embed code, we'll use SWFObject's dynamic publishing approach to embed the SWF on your site.

We'll also store the SWF's parameters in a JavaScript object named swf; this makes it easy for us to re-use the SWF's information a little later.

Important: The SWF's URL must be an absolute URL if you're giving it out to visitors; if not, their embed will fail because it won't be able to find and load the SWF.

<head>
<script type="text/javascript">
var swf = {
    url: "http://yourdomain.com/path/to/yourMovie.swf",
    id: "flashcontent",
    w: "550",
    h: "400",
    minFlashRequired: "7",
    embedCode: ""
};
//Display the SWF
swfobject.embedSWF(swf.url, swf.id, swf.w, swf.h, swf.minFlashRequired);
</script>
</head>

Step two: Create a function that displays the embed code on your page

Now that the visitor can see the SWF, we need to provide them the embed code. The following code example uses JavaScript DOM functions to dynamically add elements to the page as needed.

Note: swf.embedcode includes linebreaks (\n) to make the code more legible inside the textarea.

//Display the cross-browser embed code
swfobject.addLoadEvent(function (){
 
    //Create the code string                                                                 
    swf.embedcode = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' " 
                  + "width='" +swf.w +"' height='" +swf.h +"'>\n"
                  + "<param name='movie' value='" +swf.url +"' />\n"
                  + "<!--[if !IE]>-->\n"
                  + "<object type='application/x-shockwave-flash' data='" 
                  + swf.url +"' width='" +swf.w +"' height='" +swf.h +"'>\n"
                  + "<!--<![endif]-->\n"
                  + "<p><a href='http://www.adobe.com/go/EN_US-H-GET-FLASH'> "
                  + "Adobe Flash Player is required to view this content.</a></p>\n"
                  + "<!--[if !IE]>-->\n"
                  + "</object>\n"
                  + "<!--<![endif]-->\n"
                  + "</object>";
 
    //Figure out where to insert the code in your page
    //Replace "myPageElementID" with your own ID
    var targetElement = document.getElementById("myPageElementID");
 
    //Create whatever text fields you want to display a message to the user
    var p = document.createElement("p");
 
    p.innerHTML = "Want to put this movie on your webpage? "
                + "Copy this code and paste it inside your page's body tags!"
 
    document.body.insertBefore(p, targetElement);
 
    //Create a textarea that will contain the code.
    //Textareas are easiest for displaying code for visitors to copy
    var textarea = document.createElement("textarea");
    textarea.setAttribute("id", "displayMarkup");
 
    //Insert the embed code
    textarea.value = swf.embedcode;
 
    //Append the textarea to your document
    document.body.insertBefore(textarea, targetElement);
 
});

Demo: Sharing embed code with visitors

Questions or Comments?

If you have questions or would like to point out an error, please post your remarks in the SWFObject Google Group. Thanks!