How to Insert a YouTube Video into Your Web Page with Dreamweaver
-
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
This article assumes that you already know how to create a website using Dreamweaver. If this is not true, you may want to read the following articles first.
The Beginner's A-Z Guide to Starting/Creating a Website takes you through all the steps needed to starting a website.
My Dreamweaver CS3 Tutorial series deals specifically with the design of a site using Dreamweaver.
I will also assume that you have already uploaded a video to YouTube or some other video sharing web host.
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.
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:
<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 the curious, the above code was taken from thesitewizard.com's video on How to Add a Feedback Form to Your Website at http://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.
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.
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.
Things to Note
- The YouTube Code will Not Validate
If you are in the habit of using Dreamweaver's internal validator to check your web pages, or if you use some other web page validator such as HTML Tidy as discussed in my article "HTML and CSS Validation: Should You Validate Your Web Page?", you will find that your web page, which previously probably validated fine, no longer checks out as having valid HTML.
The validator is correct in saying that the YouTube code is not valid. However, before you rush off to replace the code with more standards-compliant HTML, note that support for standards compliant code is not uniform among browsers where the embedding of the YouTube flash video object is concerned. Your perfectly standards-compliant code may work well in one browser, but have minor quirks in another. The non-standards-compliant code supplied by YouTube, however, works perfectly in all modern graphical browsers. In other words, while the code is not "standard" in the sense that it is allowed in the official specifications, it is a de facto standard as far as modern browser support is concerned.
For those who don't know where to find Dreamweaver's built-in validator, look for the "Check Page" button just above your page content. It should be somewhere above the horizontal ruler line, on the same bar as "Code", "Split", "Design", "Title" (etc).
- Convert Active Content Dialog Box
If you close the page containing the YouTube embed code, then reopen it in Dreamweaver, Dreamweaver may display a dialog box warning you that the page contains code that will not work in the most recent versions of Internet Explorer. It will offer to convert the tags for you to browser-safe versions.
Don't be alarmed. In spite of the warning, the default code supplied by YouTube appear to work fine in numerous browsers, including IE 6 and 7 (the current version of IE at the time this was written). To be safe, though, whether you allow Dreamweaver to convert the code or not, you should always test your pages in as many browsers as possible. Suggestions on how to test with multiple browsers, including multiple versions of IE are given in my article on How to Check Your Website with Multiple Browsers on a Single Machine.
Conclusion
That's all there is to it. Congratulations on your first page with an embedded video.
Article Link: https://www.youtubeget.com/yg7.html
Download Your Favorite YouTube Video Now
-
Name: YouTubeGet
Version: V5
Size: 5.71MB
OS: Windows 2000/XP/2003/Vista
License: Shareware
Price: $29.95
Description:
YouTubeGet is an all-in-one software designed to make quick and easy work to download YouTube videos and convert them. Offering a multitude of methods to acquire the video, this application has all the power you need while still remaining small and easy to use. After downloading videos it will auto convert FLV files to MP4, 3GP, AVI, WMV, MOV etc. Soon, you can see YouTube videos on your MP4 or Cell phone.
Reddit