How to Insert a YouTube Video into Your Web Page with Dreamweaver

Embed a video from YouTube and other video hosting sites


How to Insert a YouTube Video into Your Web Page with Dreamweaver

by Christopher Heng, thesitewizard.com

This tutorial deals with how you can embed a YouTube video onto your web page using the Dreamweaver web editor. You can also use this same procedure to embed a video hosted with another video sharing service, such as those listed on the Free Video Sharing Services and Hosting page.

Prerequisites

Steps to Embedding a Video onto Your Site

The procedure for adding the YouTube code to your web page is essentially the same as that described in the more general article How to Insert Raw HTML Code in Dreamweaver.

  1. Get the Embed Code

    Go to the page where your video is displayed in YouTube, or whatever video sharing service you're using. You should be able to find the "Embed" code for the video. This is the code that you will insert so that the video will appear on your web page.

    The embed code looks something like the following:

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

    For the curious, the above code was taken from thesitewizard.com's video on How to Add a Feedback Form to Your Website at https://www.thesitewizard.com/general/feedback-form-video.shtml

    Select the code, and copy it to your clipboard. That is, after selecting the entire block of text in the "Embed" box, click "Edit" on the menu bar and select "Copy" on the menu that appears.

  2. Open Your Web Page in Dreamweaver

    Now start Dreamweaver, and load the web page where you want the video to appear, and click the spot on the page where the video should be placed. The blinking text cursor should appear in that location.

  3. Insert the YouTube Embed Code in the Code Mode

    The simplest way to insert the YouTube code is to switch to Dreamweaver's "Code" mode, which allows you to see the actual HTML that is produced by the editor for your web page. To do this, click the "View" menu, and then select the "Code" menu item on the menu that appears.

    The screen should switch from the visual layout displayed by the "Design" mode to show you the "raw" HTML for your page. Since you have already positioned your cursor at the place you want the movie/video clip to appear, all you have to do at this point is to insert the code you copied earlier. To do this, click the "Edit" menu and select "Paste" from the menu that appears.

    At the bottom of the page, in the Properties panel, you should see a button labelled "Refresh". Click it.

    Switch back to the "Design" mode by selecting "Design" from the "View" menu. Although you won't be able to view your video clip in Dreamweaver, a placeholder box should be visible on your page. If the position of the box is not satisfactory, for example, if the video is placed on the same line as an existing line of text, you can move that text away by simply hitting the ENTER key (or RETURN key if you use a Mac) after positioning the cursor at the beginning of the text in question.

    Once you're satisfied, publish your page onto your site and test it by visiting the page with a web browser.

Conclusion

That's all there is to it. Congratulations on your first page with an embedded video.

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 Dreamweaver





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.