Embedding a Video Directly into the Webpage

For many reasons, webmasters want to place a video on their website to sell products or to teach something. There are many ways to embed videos into a web page. This tutorial will only touch on 3 ways to embed videos. Below are 3 ways we will embed a video:

• Mediaplayer.swf (Adobe Flash)
• Embed .wmv (Windows Media)
• Embed .mp4 (Apple Quicktime)

Each way you embed your video will depend on the video format and the type of player you want to use. You can use Windows Media in your browser to watch .wmv files. If you have an mp4 file format video, you can use the mediaplayer.swf method or the .mp4 Quicktime method. To use these video codes, you will need to be able to insert code into your website. Below are the steps to embed your videos into your website.

Important! Where you put the code will depend on how you are editing your website. If you are using the Premium Web Builder, you will need to use the "Script module". If you are using a Content Management System (CMS) like Drupal or Joomla, there is a different way to insert code. You will want to consult the software developer on how to insert code in your particular webs site building program.

Video Embed with mediaplayer.swf (Flash)

The following steps will explain how to use the "madiaplayer.swf" player in your website code. In this example, we will link to a file called "video.mp4".

Important! You will need to download the mediaplayer.swf file from Google and upload it to your websites directory. The following is the link to the mediaplayer.swf file at Google.

http://code.google.com/p/youplayer/downloads/detail?name=mediaplayer.swf

After you download your mediaplayer.swf file and upload it to your server, follow the steps below to embed the video in your website.

1. Edit your page in your website that you want to insert the video into.
2. Add the following line to your code in your site where you want the video to display.
   

   <embed src="/support/mediaplayer.swf?file=video.mp4" width="325" height="230" allowfullscreen="true" />

   Save the file.

3. Visit your website. You may need to clear your browser cache to see the changes. The Video will look like the snapshot to the right.
   

Video Embed .wmv files (Windows Media)

Another way to embed a video into your website is to use the Windows Media Player code. The following example will link your code to a file called "video.wmv".

Important! Needs Windows Media Player Plugin installed in the browser to see it.

You will need to upload your video into the directory for your website and follow the steps below to link the code to it.

1. Edit your page in your website that you want to insert the video into.
2. Place the following code in your web page where you want the video to appear.
   

   <object width="325" height="250" type="video/x-ms-asf" url="video.wmv"
   data="video.wmv" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
   <param name="url" value="video.wmv">
   <param name="filename" value="video.wmv">
   <param name="autostart" value="1">
   <param name="uiMode" value="full">
   <param name="autosize" value="1">
   <param name="playcount" value="1">
   <embed type="application/x-mplayer2" src="/support/video.wmv" width="325" 
   height="250" autostart="true" showcontrols="true"
   pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
   </object>

   Save the page.

3. Visit your website to see the video in your site. The video should look like the snapshot to the right. If you get a plugin error, you will need to download the Windows Media Plugin for your browser. Also, you may need to clear your browser cache to see the changes.
   

Video Embed .mp4 files (Apple Quicktime)

Below are the steps to insert a Quicktime .mp4 code into your website. The file we are using is called "video.mp4".

Important! Needs Apple Quicktime installed for browser.

Your .mp4 video will need to be uploaded to the server in order for you to link to it.

1. Edit your page in your website that you want to insert the video into.
2. Paste the code into your site where you want the video to display.
   

   <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
   CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" WIDTH="200" 
   HEIGHT="180" >
   <PARAM NAME="SRC" VALUE="video.mp4" />
   <PARAM NAME="autoplay" VALUE="true" />
   <EMBED SRC="video.mp4" TYPE="image/x-macpaint"
   PLUGINSPAGE="http://www.apple.com/quicktime/download" WIDTH="320" 
   HEIGHT="200" AUTOPLAY="true"></EMBED>
   </OBJECT>

   Save the changes.

3. When you visit your site you will see the video load in the Quicktime format. If your changes are not showing, you may need to clear your browser cache to see the changes.