InMotion Hosting Support Center

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".

Download the mediaplayer.swf fileImportant! 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. Code for mediaplayer.swfAdd 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. Mediaplayer.swf video in websiteVisit 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. Windows media embed video codePlace 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. Windows Media Player embedded videoVisit 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. Quicktime player code for embedding videoPaste 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. Quicktime player embedded videoWhen 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.
Continued Education in Course 201: Adding Videos to a Website
You are viewing Section 3: Embedding a Video Directly into the Webpage
Section 2: How to add a Video Link to your Website

Support Center Login

Social Media Login

   
Social Login Joomla

Related Questions

Here are a few questions related to this article that our customers have asked:
Server not playing mp4 videos on mobile devices.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2014-08-09 5:00 am
i think its very fine.good work.
n/a Points
2014-10-21 5:25 pm

The mediaplayer.swf is giving me errors on my mp4 file. Says its an unsupport video format. Maybe its not the latest version?

11,186 Points
2014-10-21 5:33 pm
The MP4 container can contain various different video encoding methods in which it could potentially be unsupported as this is a bit of an older method to embed files. You may have better luck using a service such as Vimeo or Youtube for embedding your videos.
n/a Points
2014-12-14 1:39 pm

Video Embed .mp4 files (Apple Quicktime)

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

Which directory?  The upload location of the file in the directions is curiously absent. 

Staff
37,753 Points
2014-12-15 11:56 am
Hello Steve,
The directory is absent because there is no specific directory to upload it to. Each person designs their site in different ways. Many may have a specific folder to upload the videos to, some will not. Maybe they put all videos in one folder, maybe they organize the content differently. It is a lot like a closet, each person has their own way of storing things. As long as it in the house (root directory of the site), then whichever room or closet it is stored in is up to you.

Do know, however, that if you have it in a subfolder you will need to add that to the source path. For example, if the video is in your main root, it would appear as in the example:
SRC="video.mp4"

Whereas if it was in a subfolder named 'videos' then you need to specify that in the path:
SRC="videos/video.mp4"


Kindest Regards,
Scott M
n/a Points
2014-12-15 12:59 pm

Thanks - this is precisely the information that was missing.  It removes one of the variables when troubleshooting a video that does not play - by knowing the video is in the proper place in the directory structure.

n/a Points
2014-12-21 7:53 pm

Good morning,

the Video Embed with mediaplayer.swf (Flash) just displays a black screen until the person presses play. Is there a possibility to show a still image of the actual video or define an image to be displayed before the person presses play ?Thanks in advance.

11,186 Points
2014-12-22 10:10 am
Unfortunately, I am unaware of a solution for this. Also, I highly recommend using a service such as YouTube or Vimeo as there will be additional options there to add a custom thumbnail and typically serves up videos faster.
n/a Points
2015-01-03 2:42 pm

Thanks for the answer : a trick to circumvent the black screen would be to display a still image that would launch the video when clicking. Is there a possibility to launch the video using Javascript/swfobject.js for example ? I've crawled the web without findind a method that fits this good script. Thanks anyway !

n/a Points
2014-12-23 12:35 pm
I was searching for the right code in HTML 4, but your answer was SPOT ON! Thanks!!
n/a Points
2015-02-21 12:30 am
Found the information I was looking for, well explained, useful feedback from the community. Thanks
n/a Points
2015-04-03 11:34 am

MP4 and webm videos are4 not running on my page .please tell me what i have to do now.Please tell me how can i do this ?

Staff
32,821 Points
2015-04-03 3:52 pm
Fawad,

You need to supply us more information about your website before we can help with this issue. If you're hosting your site with InMotion, then please provide a URL and specific page information where you're having the problem. Otherwise, if you follow the directions in the article above, you will be able to play the files directly from the website. The files typically need a player if you're to play them directly from a website. You can also upload the files into a player like Youtube or Vimeo, then get the code and apply to your website.

If you have any further questions or comments, please let us know.

Regards,
Arnel C.
n/a Points
2015-08-07 5:33 pm

I used the first embed code for Adobe Flash and it works perfectly! What code can I insert to play automatically and loop the video? 

Staff
10,077 Points
2015-08-10 8:14 am
Hello Tracy,

If you are using the embed HTML code then you should just need to add the loop="True" section such as the example below:

<EMBED SRC="YourDomain/sample.mp3" LOOP=TRUE>

Best Regards,
TJ Edens
n/a Points
2015-09-16 2:03 pm

I have the wmv code inserted and it plays in the preview pane of my software builder. But when browsing the file on the web I get an error the plug in is not supported.  I ftp the updates to the web.

 

Staff
23,492 Points
2015-09-16 4:58 pm
Hello Lori,

Thank you for contacting us. WMV files have known compatibility issues on some browsers, such as Chrome Browser. This may be related to your issue. Converting the format to something more popular such as .mp4 may correct your problem.

We are happy to help you troubleshoot further, but will need some additional information. Can you provide a link to the site, so I can test?

Have you tried on other browsers, such as FireFox, Safari, IE, etc.

Thank you,
John-Paul
n/a Points
2015-09-17 2:07 pm

Hi John-Paul

Here is the page http://www.strp.ca/STRP_Staff.htm.  I volunteer for the organization.  I noticed after I posted on In Motion that it was working in IE.  However it takes about 15 seconds to load.  It doesn't run in Chrome or Safari.  I don't have Fire Fox.  All help is appreciated !  I realize the entire site needs an overhaul, but I am trying to keep running costs to a minimum for them. 

Thank you

Lori Ann

 

Staff
23,492 Points
2015-09-17 6:43 pm
Hello Lori,

Thank you for contacting us. Yes, this issue seems related to the video file format being wmv. The easiest option may be to convert it to mp4 as suggested previously.

There are many free tools available for converting wmv files, such as Convert video to MP4.

This should allow your file to be played on most browsers.

If you have any further questions, feel free to post them below.

Thank you,
John-Paul
n/a Points
2015-09-19 3:46 pm

Hi John-Paul I converted the file to MP4 and used the In Motion code to run.  Can you check http://www.strp.ca/STRP_Staff.htm  I still have an issue in Chrome.  Any more ideas ?

n/a Points
2015-09-20 12:42 pm

Hi John-Paul  I did convert to MP4 and embed the video in the webpage.  But it still doesn't show in Chrome or Safari.  Can you test ?  http://www.strp.ca/STRP_Staff.htm

Staff
37,753 Points
2015-09-21 2:20 pm
Hello Lori,

The browser is trying to use QuickTime to run the video. Chrome does not support QuickTime. Have you tried converting to avi format?

Kindest Regards,
Scott M
n/a Points
2015-10-05 12:41 pm

pls its is complicated i need more light on how to upload a playing video on my site

Staff
37,753 Points
2015-10-05 1:28 pm
Hello ife,

I'm not quite sure where you are stuck. The article goes over how to upload and then embed the video. What part are you needing assistance with?

Kindest Regards
Scott M
n/a Points
2015-10-26 11:29 am

how to embed avi file in html page?

Staff
10,077 Points
2015-10-26 11:34 am
Hello Zia,

I would suggest converting the file to MP4 as that file accepted by default n HTML without major work arounds and the file size is generally smaller. However I did find a tutorial on how to do embed AVI in HTML.

Best Regards,
TJ Edens
n/a Points
2015-12-13 11:26 am

Great post. i like it. feeling great when reading your post.

n/a Points
2016-01-23 6:52 pm

Hi, I wish to display 14 different videos on my page. They are stored on my computer I am using WAMPserver and Localhost. My videos are stored in a folder Tna/Videos and are in wmv format, I was able to use you code above to play one of the videos, I had to save it as a html file and run it independently, it opened in a seperate window, although it wasnt embedded. I changed the values of your code although I dont know what each of them mean. Here is my code

<object width="100%" height="100%"

type="video/x-ms-asf" url="/Tna/eNISAT/LoginTutorial.wmv" data="/Tna/eNISAT/LoginTutorial.wmv"

classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

<param name="url" value="/Tna/eNISAT/LoginTutorial.wmv">

<param name="filename" value="/Tna/eNISAT/LoginTutorial.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="/Tna/eNISAT/LoginTutorial.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>

</object>

My question is how can I display 14 of these, obe for each video and make them embedded.

 

Thanks

 

Stephen

Staff
37,753 Points
2016-01-25 6:11 pm
Hello Stephen,

I was able to take the code from the tutorial, as well as the code you provided and get it to work fine. I only changed the video path/name to match that of my server. The videos were all embedded and did not open in different pages. I did not test 14, but did test 5 at once. Inserting nine more should act the same. I did not see any errors in the way they behaved. If you can provide a link to one that is not behaving, I may be able to take a quick look.

Kindest Regards,
Scott M
n/a Points
2016-03-31 8:12 am

For me the ideal solution is to use the player Vynch. With this technology you can embedded in your own website a room with video that you can watch synchronized. You can create playlist and share with friends and user! there is also a chat to exchange your impressions..

n/a Points
2016-05-03 9:08 am

Hi,

I am facing problem with video with Enternet explorer hoever it is fine on Crome.

Please see the link- http://nirmaaninfra.com/demo

It is running fine on Crome howevr When I am entering the site on different browser its not playing.

Would request you to please help me in this case.

 

My Email id is rais@wiztech.net.in

 

Many Thanks,

 

 

Staff
3,837 Points
2016-05-03 10:56 am
The video is loading well in my Firefox browser after taking a few seconds to load. Which video format are you using? You might see some buffering issues with high definition video depending on multiple factors.
n/a Points
2016-05-03 11:50 pm

I have q question about using a PHP file to simplify a procedure described below.

 

I've designed a website for people at end-of-life and dementia including Alzheimer's Disease, with a list of some 1,100 YouTube songs (hymns, gospel music, etc.) that include lyrics which family members can read, and sing, along with their loved ones to bring back memories of these songs.

 

I've used the simple and free VideoDownloader, http://ytddownloader.com/ utility to download some 114 hymns to a folder on my PC, which I then uploaded to an MP4 player that used the outstanding (and free) VLC Media Player,  http://www.videolan.org/vlc/, to play these hymns continuously ("looped").

 Many visitors to my site will be middle-aged or elderly -- and “all thumbs” -- and incapable of following the YTDdownloader procedure.

 

 

Consequently, I would like to automate the procedure by allowing them to peruse the website’s 1,100 YouTube videos, click on those they wish to download, and click “Download all your hymns now” with a progress bar showing the time to wait for download completion.

 

I’ve been told that PHP coding would be necessary and that it would be as complex as reinventing the wheel – “costing many, many thousands” which I do not have, as this is a volunteer project, free to all visitors, and no obnoxious advertising.

 

Has anyone done this before?

 

I’ve written the HTML5 and CSS3 code but this “automation” programming is beyond my capabilities.

 

Thanks,

Jock Stender

Charleston, South Carolina

 

 

Staff
32,821 Points
2016-05-04 12:28 pm
Hello Jock,

Sorry for the problem - this is unfortunately a question that you need to ask of a developer. We can probably reference websites that might be similar, but truthfully, they would need to be reviewed to see if they match the criteria you're saying or not. This is not a simple project, and may require more than a volunteer professional to complete it. It is beyond the scope of this article which is simply to embedding video into webpages. Apologies that we cannot answer your question. If you another question related to this particular article then we would be happy to answer. If you have a question that is not part of this category, please submit it as a question in this section of our support center website.


If you have any further questions or comments, please let us know.

Regards,
Arnel C.
n/a Points
2016-05-12 9:00 pm

Arn,

 

Thank you kindly for your reply.  It is indeed a sticky problem needing a developer.  Yesterday Josh Holt of http://www.bandvista.com/ which designs websites for rock & roll bands, sent me a list of developers in my area, and that is a start.  What with the Yellow Pages gone the way of dinosaurs, I wasn't even able to find such a list.

 

Your website is a treasure trove of invaluable information populated by some really smart folks.  

 

Keep up the excellent work.

 

Jock Stender

n/a Points
2016-06-21 4:07 am

Hi,

 

I am new to html, i have copied the below code that you have provided into my html page and have changed the "value" fields as per below. I have also placed the video in a sub folder, yet, the video is not playing on my page. can you please advise.

Staff
3,837 Points
2016-06-21 9:10 am
Make sure that the video URL points to your subfolder. For example, /subfolder/video.wmv.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

37 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!