Putting Videos into your Websites

Have you ever visited a website and wondered how they got a video onto their page? I have, and honestly, I’m very jealous of these creative sites!  These webpages have truly inspired me to explore this challenge. Here’s the process of adding a video using Dreamweaver:

Before we begin, you must upload your desired video either from a camera or from the Internet. Save it as something memorable on a flash drive for later usage. In this case, we’ll name it “Baby Monkey Going Backwards on a Pig,” which is a Youtube video.

In Dreamweaver, open a new HTML file and save it as Videopage.html (this page will only be used as a rough framework for inserting your video).

Create a ‘div’ in code view:

<div id= “content”>
<div id= “main_video”>


Click inside the div (the space right above ) and type an open bracket and begin typing ‘video’. Dreamweaver will automatically select video as a choice, so press Enter or Return (Mac) to choose the video tag. Next, press the space bar and type “SR” and it will automatically choose SRC for the source. Press RETURN again, and then press RETURN a second time to browse for the video you want to use. Select the .mp4 file in the browser that pops up. Click Open. It will insert the video at that location.

Close the opening tag with a ‘>’ bracket. Then you must create a closing tag, by typing an open bracket, forward slash, and it will close that video tag…
Your code should look like this so far:

<div id= “content”>
<div id= “main_video”>
src= “video/Baby Monkey Going Backwards on a Pig.mp4”>

Next, we’ll need to define the width and height of your video. In the opening tag (put your cursor in between .mp4 and the quote), press Space and create another value by typing:

width= “500” (to make it 500 pixels wide) Then type:
height= “300” (which will make it 300 pixels tall).

Save the file by going to File, Save.

However, we aren’t done yet! We haven’t inserting any controls yet!

Put your cursor after the height attribute. Start typing ‘control’ and choose the ‘controls’ option that Dreamweaver gives you. By doing this, in design view, you will be able to see that your video has controls now, such as play, pause, stop, volume, and so on.

Save your work again. It would be a good idea to test your work by selecting the option “preview in Firefox” at the top left of your Dreamweaver screen. If you do this, you’ll notice it doesn’t work! So you’re thinking, “All that work for nothing?!!?!” The problem is that Firefox chose to embed a format called the Ogg format. But, no worries!!! Close the Firefox window and go back to your video tag, where we will change the format a little to make it compatible. Delete the source information (src= “video/Baby Monkey Riding Backwards on a Pig.mp4”) and keep the rest.

Between the opening and closing video tag, press RETURN a couple of times.

Create an opening tag and start typing source again and choose source and press enter. Then press the space bar once and type src, press Return, and press return again to browse for it. In the browsing window, select the mp4 file and then select open.

src=”video/ Baby Monkey Going Backwards on a Pig.mp4”

We also want to choose the type that’s going to be included. So, press the space bar and choose type. The value is going to be video/MP4 so this part of your code should look like this so far:

src=”video/ Baby Monkey Going Backwards on a Pig.mp4”


Next, type a forward slash followed by a closing bracket which looks like this: “/]”, since this source tag is a self-closing tag. Next we must choose another source…

Again type <source src

And in the browsing window this time, choose the .ogv file extension. Click Open. Define this as a video again by typing:


End this again with a forward slash and closing bracket (/]) to close the tag.

So the whole line of that last code should look like this:

<source src=”video/ Baby Monkey Going Backwards on a Pig.ogv” type=”video/ogg”/>

All of your code as a whole should look like this:

<div id= “content”>
<div id= “main_video”>
<video width=”500” height=”300” <controls>
<source src=”video/ Baby Monkey Going Backwards on a Pig.mp4” type=”video/mp4”/>
<source src=”video/ Baby Monkey Going Backwards on a Pig.ogv” type=”video/ogg”/>


Save your files.
Preview in Safari. It works!
Preview in Firefox…Drum roll please…

Perfecto! You have successfully inserted a video into Dreamweaver and you can now make all your friends jealous with nifty videos on your websites!

Kim Bizal

~ by kmb221 on September 16, 2012.

%d bloggers like this: