- Two Kinds of Flash Video: Movies (SWF) and Flash Video (FLV)
- Embedding FLVs from YouTube in a Dreamweaver Web Page
- Embedding Your Own FLVs in a Dreamweaver Web Page
- Embedding SWFs in a Web Page
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
- Post your Flash video on YouTube.
- On YouTube, select the code in the Embed field next to the video (see 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>
- 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.
- 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.
- 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 A YouTube video embedded in a web page in Dreamweaver, right-aligned and with horizontal and vertical spacing added.