Home / Articles / Adobe Flash / Embedding Flash Video with Dreamweaver

Embedding Flash Video with Dreamweaver

Article Description

YouTube is cool, and it's a really easy way to get your videos online. You can even link from your web site to your video on YouTube. But wouldn't it be better if you—not YouTube—controlled how the video displayed? David Karlins shows how to use Dreamweaver to embed a video clip into your own web page, presented with your own customized display skin, and surrounded by your own content.

Embedding FLVs from YouTube in a Dreamweaver Web Page

Let’s start with the process for embedding an FLV Flash video in your Dreamweaver web page. In Dreamweaver CS3, it’s easy to embed a video on YouTube. (The downside, as I mentioned earlier, is that you have very little control over how the video displays; along with the video, you get YouTube’s interface.) Let’s get started.

  1. Post your Flash video on YouTube.
  2. On YouTube, select the code in the Embed field next to the video (see Figure 1).
    Figure 1

    Figure 1 Locating the embed code for a YouTube flash video.

    <object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/pIG4wvSJQXc"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/pIG4wvSJQXc" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>
  3. Working in Dreamweaver’s Design view, position the mouse pointer where you want the video to appear, and then click to place the insertion point there in your Dreamweaver document.
  4. Select Code view from the Document toolbar. Don’t be alarmed when your WYSIWYG design environment becomes a block of code; Dreamweaver "kept your place" for you, and you’ll return to Design view in a moment. In Code view, choose Edit > Paste or press Ctrl-V (or Command-V) to insert the copied block of code from YouTube.
  5. Click the Design view button to return to Design view and see your embedded video.

If you’re familiar with defining layout attributes for objects (such as the Align attribute, which flows text around an object), you can do some minimal formatting with the embedded YouTube video:

  • To right-align or left-align the embedded video, choose Right or Left from the Align pop-up in the Dreamweaver Property inspector.
  • To define spacing around the embedded video, use the H Space (for horizontal spacing) and V Space (vertical spacing) boxes in the Property inspector.

In Figure 2, I’ve right-aligned the embedded video to flow text around it to the right, and defined two pixels of vertical spacing and five pixels of horizontal spacing to keep text from bumping into the video.

Figure 2

Figure 2 A YouTube video embedded in a web page in Dreamweaver, right-aligned and with horizontal and vertical spacing added.

3. Embedding Your Own FLVs in a Dreamweaver Web Page | Next Section Previous Section