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

Tips on embedding a video into your site using Nvu or KompoZer


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

by Christopher Heng, thesitewizard.com

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:

    <iframe width="420" height="315" src="https://www.youtube.com/embed/tIBxavsiHzM" frameborder="0" allowfullscreen></iframe>

    For those wondering, the above code comes from thesitewizard.com's feedback form script How-To video at https://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 don't see the video in either KompoZer or Nvu, 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-2015 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

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

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 https://www.thesitewizard.com/thesitewizard.xml. 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 Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

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





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

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