How to Insert a YouTube Video into Your Web Page with Nvu or KompoZer

I was just asked by a visitor to thesitewizard.com how he could go about putting a YouTube video into his web page using either Nvu or KompoZer. Instead of answering the question only in terms of YouTube, I've decided to discuss in general how you can use Nvu or KompoZer to embed a video from any of the video sharing sites, including YouTube, using the code supplied by the video host.

For those already familiar with inserting ordinary HTML code in Nvu or in KompoZer, the procedure is identical.

Steps to Embedding a Video into Your Site Using the Supplied Embed Codes

1. Get the embed code

   After you upload your video to a video sharing site like YouTube, find the page where you can get the embed code for the video. It can usually be found on the very page that the video is displayed. On YouTube, just go to your video page. The code looks something like this:

   <object width="425" height="350">
   <param name="movie" value="http://www.youtube.com/v/tIBxavsiHzM" />
   <embed src="http://www.youtube.com/v/tIBxavsiHzM" type="application/x-shockwave-flash" width="425" height="350" />
   </object>
   

   For those wondering, the above code comes from thesitewizard.com's feedback form script How-To video at http://www.thesitewizard.com/general/feedback-form-video.shtml

   Leave the web browser open on this web page.

2. Start Up KompoZer or Nvu

   Start up your either Nvu or KompoZer, depending on which you are using. The procedure for both web editors are identical. Load the web page where you wish to place your video and move your cursor to the portion of the page where the video should appear. You can do this by simply clicking the spot where you want to place the movie. Make sure that there is a blinking text cursor in that location before you go to the next step, otherwise click till you get it in the right spot.

3. Open the Insert HTML Dialog Box

   Click the "Insert" menu followed by the "HTML..." menu item. A window should open. Switch to your web browser, and select the embed code. Click the right button on your mouse and select "Copy" (or its equivalent in your browser) from the menu that appears.

   Return to Nvu or KompoZer, and click the right mouse button again. This time select "Paste" from the menu that appears. Click the "Insert" button to close the window.

4. Are You Getting a Blank Page or No Video?

   If you use KompoZer, you should be able to see a rectangular video window in the place where the video will appear. The video itself will not appear, nor will there be any player controls. Nvu, on the other hand, will only show a blank space in the spot where the video window should appear.

   In both cases, don't worry. If you inserted everything correctly, the actual code is on your page, even though Nvu and KompoZer do not display it correctly. When you upload it to your website and test it in a real browser, you will be able to see your video.

5. Upload / Publish Your Web Page

   Upload or publish your web page, and load the page from your site with your browser.

That's it. You should now have a web page with your video inserted into it.

Copyright © 2008 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

If you find this article useful, please consider making a donation.

thesitewizard™ News Feed (RSS Site Feed) 

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

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

• The Beginner's A-Z Guide to Starting/Creating Your Own Website
• How to Register Your Own Domain Name
• How to Make Money From Your Website
• The Real Meaning of "Unlimited" in Web Hosting
• How to Design and Publish Your Website with Nvu
• Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3
• What Sort of Website Should I Create In Order to Earn Money?
• The Pros and Cons of Using an Online Blog Software or a Content Management System (CMS)

New Pages

• How to Create and Use Cookies in PHP
• How to Insert Google AdSense Advertisements into Your Blogger Blog
• How to Design a Two Column Layout for Your Website Using CSS
• Is It Legal to Use Any Piece of Music, Image, or Article for my Website? And Other Questions on Copyright Relevant to Webmasters
• Why Do the Pictures on My Web Page Not Show Up in Nvu / KompoZer? Troubleshooting the Broken Images on Your Page.
• Should I Have a Multi-Column Newspaper Layout for My Website? More Tips on Usability
• Should I Use a Temporary Domain Name Till My Preferred Domain Becomes Available?
• Should You Use Cloaked Domain Redirection to Point to Your Website?
• Why Is My Site Not Ranking in the Search Engines?
• What Sort of Website Should I Create In Order to Earn Money?

Popular Pages

• How to Start / Create Your Own Website: The Beginner's A-Z Guide
• Tips on Choosing a Good Domain Name
• How to Create a Search Engine Friendly Website
• Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3
• How to Design and Publish Your Website with Nvu (free WYSIWYG web editor)

How to Link to This Page

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as:

How to Insert a YouTube Video into Your Web Page with Nvu or KompoZer