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

Inserting a Video Into Your Website

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

by Christopher Heng,

This tutorial deals with how you can insert a video into your web page using the free BlueGriffon web editor. When done, your visitors will be able to play it directly in their browser window, using a web-based video player embedded in your page.


Steps to Inserting a Video into Your Web Page

  1. Start by creating a folder to contain your video. This must be a sub-folder of your local website directory. For example, if your web files are saved in a folder called "my-website" on your desktop, create a sub-folder called (say) "video" (without the quotation marks) in the "my-website" folder.

  2. Copy your video to that folder. Do this even if your video is already in another folder on your computer. You need to do this so that the relative link that BlueGriffon creates to the video is formed correctly.

  3. If you have not already started BlueGriffon, do so now, and open the page where you want to insert the video.

    (For those who are confused by my last sentence, thinking, "Wait! What page? How do I get that page?", it means that you need to start at the beginning, with the first chapter of the BlueGriffon Tutorial. As I said earlier, this article assumes that you have this basic knowledge already; that is, you know how to create new pages for your website as and when you need them.)

  4. Click the spot on the page where you want the video to appear. This places the text cursor in that position.

  5. Click "Insert" from the menu bar, followed by "Video" in the drop-down menu that appears.

  6. A dialog box with the title "Insert or edit a video" will appear. Click the folder icon that is next to the blank field.

  7. The "Select a file" dialog box will pop up. Navigate to the folder where you saved the video in steps 1 and 2 of this section, and click the video file once. The name of the video should appear in the "File name" field. Click the "Open" button.

  8. If you have done what I said earlier (that is, created a "video" subfolder and placed your video file there), the "Video file location" field should now say something like "video/your-video-file-name.mp4" and the "Make URL relative to page location" box should have a tick in it (see picture below). Your file name (which I'm sure is not actually called "your-video-file-name.mp4") should be immediately after the "video/" part.

    The insert video dialog box in BlueGriffon

    If the field contains an address starting with "file:///", it probably means that you failed to copy your video into your website folder hierarchy (and your file is located on another drive or partition on your system). Go back to the first 2 steps and do them. If you ignore this, you will find that your video will not work on your real website.

  9. A preview of the first scene of the video will appear in the "Insert or edit a video" dialog box you saw earlier.

    If your video is very big, the window will stretch even beyond your screen. Unfortunately, this means that if your screen is not big enough, the bottom of the dialog box (where the "OK" and "Cancel" buttons are) cannot be seen. For such large video resolutions, the same problem will occur on your website, where it will too big for the browser window. To resize the video so that its default width will fit into your visitor's window, enter a number into the "Width" field. For example, to make the default width of the video 720 pixels, enter "720" (without the quotation marks). The preview will also be resized accordingly. There's no need to enter a height. If you leave it blank, the default action is to resize your video proportionately, which is what most people want anyway. See the picture earlier in this article, where I have already specified "720" for the width.

  10. You will probably also want to put a tick in the "Show video controls" box. This will cause the browser to display buttons on the video player so that your visitor can play, pause, resume playback and change the volume. Note that the exact controls shown depends on your visitor's browser. If you want to see what the player looks like in your current browser, see the HTML5 video demo. Note that although the latter page was not created using BlueGriffon but manually, the player is the same whether you use BlueGriffon to automatically generate the code or type it in by hand.

  11. If you want your video to loop back to the beginning when it reaches the end, click the "Loop" button to put a tick in it.

  12. The "Play automatically" box controls whether the video starts by itself when your visitor reaches the page. Note that some browsers ignore this setting by default, since playing videos drains battery life (which is very limited on mobile phones). Autoplaying videos also irritate many users.

  13. If you want to set the initial static image that is displayed in the video player window, click the "Poster" tab at the top of the dialog box. Then click the folder icon, which will invoke the "Select a file" window, allowing you to choose a picture. This is optional.

  14. When you have finished customizing the video player, click the "OK" button at the bottom of the dialog box. If the dialog box is too large for your screen, so that the button is not visible, click the "Video file location" field to put the text cursor there, then hit the ENTER key (or the RETURN key if you use a Mac).

    (As an observation, if the dialog box is too large for your screen, your video player may also be too large for your visitors' browsers. As such, you may want to consider resizing the video by entering a smaller number into the Width box.)

  15. Your video should now appear on your page. You can even play it from within BlueGriffon. However, note that the appearance of the player controls that you see in BlueGriffon will not necessarily be the same as that of your web browser. The exact controls for the built-in video player are not mandated in the web standards, so every browser does things slightly differently.

  16. Save your page by clicking "File" from the menu bar, and "Save" in the drop-down menu that appers.

  17. When you upload your website, remember also to transfer the "video" folder containing your video file.


Once you have uploaded the page and video file to your website, open that page in a browser to test it. If you find that your video does not play, use this checklist.

Copyright © 2019 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

Popular 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 BlueGriffon

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.