How To Embed a YouTube Video
On Your Website

In this video I'm gonna show you how to embed a YouTube video on your website...

Download everything we made in this video (ZIP)

Hey everybody, Greg Davis here. In this video I'm gonna show you how to embed a YouTube video on your website.

Basically, you have 2 options to add videos to your website: You can buy a video player software, or you can use a free video hosting service like YouTube.

I'm gonna show you YouTube now because it's the most popular, and I think it's a great choice for your videos, so I GO to YouTube.com

All you have to do is sign up an account, it's totally free. Then log in, and you can upload your videos right HERE. Just click the Upload button and you can upload your video.

After you've uploaded a video you can embed the code, and add it to your website. Actually, you can add any YouTube video to your website, not just yours.

Simply go to the video's page, this is one of my videos, and right below the video, look for a button that says "Embed" – actually, I CLICK share, and there it is, I CLICK "Embed"

I CHOOSE a size like 640x360px, whatever, I can change it later on in the code.

I DON'T wanna show suggested videos when the video finishes. I want people to stay on my website and watch my videos.

Now I just SELECT the CODE, PRESS ctr,c (or cmd,c on the mac) and let's GO back to DW.

I wanna place my video right after THIS paragraph, so I PUT my cursor here, I GO to the code, and right after this paragraph, I just PASTE my code in.

Ok, I'm gonna resize my video here in the code, I'll MAKE the video like, let's say 720px wide.

And my video is HD, and I wanna keep the 16 to 9 aspect ratio, so I have to do a little bit of math here to keep the original aspect ratio of the video: 720 divided by 16, multiplied by 9 equals 405

So I'll MAKE it 405px tall to keep the aspect ratio. If you resize your video, always make sure you keep the aspect ratio.
Ok, I need a div tag wrapping around the video, so I can position it the way I want.

Right before the video code, I TYPE in a div start tag: <div style="

I'm gonna use an inline style now, so I can style my div tag right here in the code without messing with the css file. But if you end up using this same exact div tag in more places on your website, then you might wanna move its properties to your css file, and use a class style instead of an inline style. For now, I'm gonna use an inline style.

So I just TYPE in width:720px; CLOSE it off, HIT my spacebar.

I TYPE in height:405px; CLOSE it off, HIT my spacebar.

I TYPE in "margin"

I'm not gonna type in margin-left, right, bottom, and top separately, I just type in margin, and I can type in all 4 values in a clockwise motion, starting from the top.

So like, top:35px -HIT my Spacebar- right:auto bottom:35px and left:auto; I CLOSE it off.

I've given it a margin-left:auto, and a margin-right:auto to center it.

And if you only type in one value for a margin property, it's gonna rotate, and it's gonna apply all the way around. If you type in 2 values, they are gonna rotate as well. The first value will apply to the top, the second to the right, the first again to the bottom, and the second again to the left. It goes in a clockwise motion starting from the top, and rotating if you type in less than 4 values.

Ok, I CLOSE my div start tag, and I CREATE a div end tag as well.

Now I GO to design view, and HERE is my video.

I can PREVIEW it in a browser, like Safari.

Here is my video, I can play it. Or if you want the video to automatically play on your site, then let's GO back to DW

I GO back to the code, and right after this zero number TYPE in: "&autoplay=1"

Now the video will automatically play on your site as soon as the page loads.

Ok, so this is how you embed a YouTube video on your website. And if you use a different video hosting service, or even if you buy a video player software, it's the same thing. You cut and paste, maybe edit a little bit, and add the video to your website. It's easy!

Ok, I'm gonna insert an order button right below the video.

I'm in code view, so I just PUT my cursor right after the video code.

I GO to my Insert panel, Common, and Image, I CLICK on this little arrow HERE.

And I can insert a regular image, an image placeholder, it can be used for an image that you haven't created yet, but you know its size and where you wanna put it, so you can put an image placeholder there, and when you have your image ready, you just point the placeholder to the image, and you get a regular image.

I can also insert a rollover image. A rollover image is basically 2 different images that change when somebody mouses over the image. For example, you can create 2 different order buttons with different colors, and by using a rollover image if somebody hovers over the image it will change. It's pretty cool!

I can also insert a Fireworks HTML.

And then I have Hotspots. You can create a hotspot area on an image, and you can define a link to that hotspot area.

Ok, I'm gonna INSERT a regular image.

I just BROWSE my order button, CLICK Ok.

For the alternate text, I TYPE in "Add to cart"

I could type in some additional keywords for search engines, whatever, I CLICK Ok.

And HERE is my image code.

Make sure you don't have a <p> paragraph tag wrapping around your image code, because if you do, and you style your paragraph tag in css, it's gonna apply to the image as well, and you don't want that. You wanna style your image separately. So make sure you don't have a <p> paragraph tag wrapping around your image code.

And in order to position the image, I need a div tag around it, so I COPY a div start tag from my video, and just PASTE it in HERE.

I also COPY a div end tag, and PASTE it in after my image end tag.

My image is 240px wide, and 60px tall in this case, so I'll MAKE my div tag the same 240px wide, and 60px tall.
The margin, well, I'll keep it the way it is, let's check it out, see how it looks. I GO to design view.
And it looks fine to me.

If I SELECT the div tag around my image, I'll see the margin-top:35px above it.

I SELECT the video div tag, and it has a margin-bottom:35px bellow it as well, yet, I only see one of them here. And that's because in css margins collapse, and whatever is the largest number, holds true.

Ok, I SELECT my image, and I LINK it to my order page.

I TYPE in 0 for the border, to get rid of the image border that comes with the linked image.

I HIT my enter key, and my image is now a link. And now I have a video, and an order button linking to my order page, where I can have an order form that people can fill out to buy my stuff.

Pretty easy, right?

Ok, I end this video now. I hope you enjoyed it, see you in the next video. Bye!

Next video:

Floating Div Tags in Dreamweaver>>>

All videos in recommended learning order:

How to design a website using Adobe Fireworks>>>

Building a Website Start To Finish With Dreamweaver>>>

How To Embed a YouTube Video On Your Website>>>

Floating Div Tags in Dreamweaver>>>

How To Create a Table in Dreamweaver>>>

Building a Web From in Dreamweaver>>>

Dreamweaver CSS Website Layouts>>>