HTML Wrapper Tutorial


If you own your own website or design websites for others, you may occasionally want to include video content such as flash videos that use the ".swf" file type. Create an HTML wrapper to properly display the embedded object--a flash file, in this case--across multiple browsers. This wrapper also includes options--such as background color, width and height, and looping--that enable you to customize the embedded object on your Web page.

  • Launch a code or text editor, such as Notepad, on your computer.

  • Type the following code into your blank document to create an HTML wrapper for a .swf file:

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

    id="myapp" width="100%" height="100%"


        &lt;param name="movie" value="Test.swf" />

    &lt;param name="quality" value="high" />

    &lt;param name="bgcolor" value=#CCCCCC />

    &lt;param name="allowScriptAccess" value="sameDomain" />

    &lt;embed src="Test.swf" quality="high" bgcolor=#CCCCCC

    width="1000" height="500" name="myapp" align="middle"









  • Change "test.swf" to the actual file name of your file. Also change the quality value, if necessary. For example, replace "high" with "medium." Specify the background color of your embedded object if "#CCCCCC" does not match your web page.

  • Modify the player attributes, including width and height in pixels, name and alignment ("left," "right" and "bottom" are options). If you want the .swf file to automatically play, leave play to "true"; otherwise, set this to "false." Instruct the file to automatically replay (loop) by setting this attribute to "true."

  • Open the File menu in your editor and choose "Save." Type your file name into the box and choose ".html" to save as a web page.

Tips & Warnings

  • Your embedded object (.swf file) must be in the same folder as the HTML file if you only specify a file name such as "file.swf." Otherwise, include the entire file location/URL.

Related Searches


Promoted By Zergnet


You May Also Like

  • How to Use a Wrapper Div

    In the early days of the Internet, Web pages mixed content and formatting into the same document. It was a straightforward --...

  • What Are Lumpia Wrappers?

    Choosing wrappers to make your own spring rolls can prove somewhat daunting since most Asian markets offer several different styles of wrappers....

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!