How to Add a (Self-Hosted) Video to Your Website with Expression Web

Inserting a Video into a Website

How to Add a (Self-Hosted) Video to Your Website with Expression Web

by Christopher Heng,

This article deals with how you can insert a video into a website using the free Microsoft Expression Web editor. The video will be stored on your own web server (as opposed to being placed on a video sharing site like YouTube), and it will be shown within a web-based video player on the page, which visitors can interact with to play, pause, rewind it, and so on.


If you are wondering what the web-based video player looks like, see the demo found on the HTML5 video tutorial page that I mentioned earlier (scroll down that page to find it). Although that page was not actually created with Expression Web, but manually coded, the player is the same whether you insert the code with Expression Web or another editor. It differs however from browser to browser, so if you were to use another browser (eg, Firefox, Chrome/Edge) to view that page, the exact controls displayed (ie, Play, Stop, Pause, etc), and their design, may be different.

How to Insert a Video into Your Web Page with Expression Web

For the sake of brevity, when I say 'click "File | Save" from the menu' in this tutorial, I mean that you should first click "File" from the menu bar, and when the drop down menu appears, click the "Save" item on it. This applies to all menu items. For example, if I say "Edit | Paste", it means to click the Edit menu, followed by the Paste item that appears on the drop-down menu.

  1. Copy the video file into the same directory (ie, folder) as the web page that will display it. Although you are allowed to put the video into any directory you want, it's probably easiest and least error-prone to just put it in the same place, especially since you will be adding the HTML code manually, and will not be able to rely on Expression Web to form valid URLs from different file paths. In fact, if you didn't understand my previous sentence ("what are file paths? what are valid URLs?"), I strongly recommend that you do this, otherwise you will find that the video player will not display the file. In addition, if your filename contains spaces, I recommend that you rename it to one without any, for reasons explained elsewhere.

    The instructions below assume that the file is in the same directory as the page that displays it. You will have to adapt them if you choose to place it in a different folder.

  2. Although Expression Web has menu options (via "Insert | Media") that allows you to insert videos, those options use methods that are now obsolete. For example, both Flash and Silverlight are not supported by any modern browser.

    As such, we will have to manually insert the HTML code for the video player ourselves. This is not as difficult as you think, since Expression Web lets you insert HTML easily via its "Code" mode. And its Code mode editor actually recognizes the modern HTML for including videos, even if the Design mode user interface doesn't provide you an easy way to insert or display it.

    We will use the following code as the basis.

    <video src="demo.mp4" controls></video>

    First select the code in the box above with your mouse. You can do this by dragging your mouse over it to highlight it. Make sure to highlight all of it (including all the angle brackets). Then click the right mouse button while the pointer is hovering somewhere over the highlighted text, to bring up the browser's context menu. Click "Copy" on that menu. This places the code into your Windows clipboard, allowing you to paste it into Expression Web in the next step (provided you don't copy anything else in-between.)

  3. Read this step in entirety before switching back to Expression Web. Then when you switch to the editor, do everything mentioned here (that is, in this step) before returning to this tutorial. Otherwise, Expression Web will hide your text cursor when you switch away, and you may forget where it was supposed to be.

    While in Expression Web, click the spot on your web page where you want your video player to appear. This places the text cursor in that position.

    Immediately switch to the "Code" mode by clicking the "Code" tab at the bottom of the Expression Web window (next to the "Design" and "Split" tabs). You should now see the HTML for your page, with the blinking text cursor positioned at the equivalent spot on the page. Click "Edit | Paste" from the menu. This will insert the HTML code from this article.

  4. Now you have to adjust the code so that it refers to your actual video file. As it stands, it points to a file called "demo.mp4" in the same directory (ie, folder) as your web page. Since it's unlikely that your video is also named "demo.mp4", change "demo.mp4" to the actual name of your video file.

    For example, if your file is called "example.mp4", change the code so that it now reads "<video src="example.mp4" controls></video>".

  5. Switch to the Design mode again (by clicking the "Design" tab at the bottom of the window). You will probably only see a blank space where the video is supposed to be. That's because Expression Web 4 uses an older display engine that does not have all the latest HTML5 changes (including support for the <video> tag). Don't worry. It will not delete your code but preserve it as-is. As such, the code will be saved along with the rest of the web page, and will work normally in a real (modern) web browser.

    Save the page with "File | Save" from the menu.

  6. Start up a web browser and open the page. Click the play button on the video player to test it.

  7. If the dimensions of the video is too big, you can actually force the browser to shrink its size. To do this, return to Expression Web. Click the "Code" tab and navigate to the HTML snippet you inserted earlier. Modify the code so that it now includes a width. For example, the following constrains the video player to a width of 720 pixels wide.

    <video src="demo.mp4" controls width="720"></video>

    Change "720" to whatever width you want. For example, width="1024" means a width of 1024 pixels. Since you didn't specify a height, the web browser will adjust it proportionately so that the picture does not become distorted.

    Notice that when you type width=" (that is, at the point when you type the opening quotation mark), Expression Web automatically types the closing quotation mark for you. Be aware of this, so that you do not blindly type yet another closing quotation mark, leading to invalid code (where you end up with 2 closing inverted commas).

  8. When you are done with your changes, remember to upload not just the page containing the video player, but also the actual video file as well. Then test the online version in your browser, to make sure that you have published everything.


If your video does not appear in the web browser, for example, you get an error message like "No video with supported format and MIME type found" (the exact wording depends on your browser), it means that you either got the filename wrong, or you placed the file in a different directory from your web page. Another possibility is that you are using an unsupported video format.

Copyright © 2019-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

How to Link to This Page

It will appear on your page as:

How to Add a (Self-Hosted) Video to Your Website with Expression Web

Link to Us
No Spam Policy
Privacy Policy
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Web Hosting
Perl / CGI
.htaccess / Apache


Free webmasters and programmers resources, scripts and tutorials Free How-To Guides
Site Design Tips at
Find this site useful?
Please link to us.