Skip Navigation

Web Developer Network Wiki

Embedding flash/movie in content area

There are a number of ways developers can embed flash movies without getting into trouble with accessibility (alternative content if users don't have flash player) or legal issue (link).

Some of us have found Geoff Stearns's SWFObject script to be extremely easy to use and solve all the problems mentioned above.

To download the latest version of the script, click here

NOTE: Version 2.2 of the script downloaded above did not work with the code below. The latest version tested and verified to work correctly within the templates is version 1.4.4 available for download here.


Code example: 

<script type="text/javascript" src="swfobject.js"></script>
		
<div id="flashcontent">
To view this element you will need Flash Player. 
You can get it at 
<a href="http://www.adobe.com/go/getflashplayer">http://www.adobe.com/go/getflashplayer</a> 
thank you!
</div>

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.addParam("wmode", "transparent");
   so.write("flashcontent");
</script>

For more info, you can visit the project page. It provides additional info on how to use the script to trigger wmode for flash movie with transparency, embedding two flash movies and etc.

The script is currently being used at ncard.unl.edu

[edit] Embedding Video using the UNL Video Player

Add the swfobject.js file to the page within the editable portion of the <head> 

<script type="text/javascript" src="/ucomm/templatedependents/templatesharedcode/scripts/components/mediaplayer/swfobject.js"></script>

First, insert a liquid picture frame into the content area of the page. 

    <div class="content_holder" id="preview_holder">
        <div class="unl_liquid_pictureframe">
          <div class="unl_liquid_pictureframe_inset">
            <div id="unl_video"></div>
            <span class="unl_liquid_pictureframe_footer"></span>
          </div>
        </div>
    </div>

Then add a script section to write the player - 

<script type="text/javascript">
var flashvars = {
  file: 'http://www.unl.edu/ucomm/ucomm/av/video/podcasts/20081022_NKnow_Hibbing.mp4',
  image: 'http://www.unl.edu/ucomm/ucomm/av/video/640x480introstill.jpg',
  volume: "100",
  autostart: "false"
};
var params = {
  allowfullscreen: "true",
  allowscriptaccess: "always"
};

swfobject.embedSWF('/ucomm/templatedependents/templatesharedcode/scripts/components/mediaplayer/player.swf',
                   'unl_video', "450", "358", "9.0.0",
                   '/ucomm/templatedependents/templatesharedcode/scripts/components/mediaplayer/expressInstall.swf',
                   flashvars, params);
</script>

Note: Modify the file and image references to point to your media. The image acts as a placeholder image while the video is loading.

Retrieved from "http://www1.unl.edu/wdn/wiki/Embedding_flash/movie_in_content_area"