How to add embed code to a Dreamweaver site

Hey, my name is Dan. In this video we're going to look at Embedding.

Now Embedding Code is essentially taking other people's offerings say, Google Maps, or Google Calendars, or wufoo forms, or MailChimp, or any of these other companies that provide a service that often allow you to embed their work. So it might be a Youtube clip it might be-- there's all sorts of ways you can embed things. So Embedding is the term.

We're going to do it with the Google Map at the moment. So I'm going to go to 'Google', 'Google Maps'. And I'm going to my office, where are you? There it is there. All I want to do is, we've got a really cool inside view, like a Google Maps walk around inside thing that we're going to use.

Now, to do it, to get it, there's the dotted line I kind of mentioned to you earlier. I'm going to click on this one. And I'm going to go to this that says 'Share or embed'. Embed's what I'm looking for. You'll find Embeds everywhere. 'Share', that's not what I want, I want 'Embed'. And what we're going to do is-- Medium?, no. I want to put a 'Custom size' in. I know I want mine to be about '300' high, from this side. And how wide? Actually I'm going to make mine responsive by putting in '100%', but I think I need to do that when it's out in Dreamweaver. I'm going to 'copy' it. And I'm going to jump into Dreamweaver. I'm going to 'click' inside this. And I'm going to go to Code view here. It's not going to be pasted as Text because if I paste it here, it's going to be a big pile of junk of text. It doesn't really work.

What I want to do is find where that guy is. There he is there. Can you see this thing, this little bit of code here. That's a non breaking space. That there is just there. If you remove it, the Column often collapses in Dreamweaver and can't be seen. So often that's the reason to pick on these little place holders. You can leave them there, you can delete them, it's up to you. I'm going to make it nice and clean, get rid of them. And I'm going to paste this in here.

What I'm also going to do is add an HTML comment in here. So I'm going to put in-- this is what an HTML comment looks like. This is going to be 'My Google Map'. Remember, comments are just here for the humans to see. The browser, in Google, whenever anyone else goes to this website, the machine's going to ignore anything that's in these spaces here. You'll notice it's a little different from where it was in css. But yes, My Google Map. Now, if I go to Live view again, you'll notice it's in here, but it's-- I gave it a Width of say 800 so it's pointing outside here. So what I'm going to do is change the Height of it. So I'm going to go back to Split view. I'm going to find this, and in the Code here, Google has been nice, and had the width and height pulled out of this Iframe, or this text here. So I'm going to type in '100%'. It just means it's going to fit the Width. I'm going to leave the Height, because 100% Height will end up going-- It will go very, very tall. It will stretch the page as far as it can go. So it's 100% Width, and a fixed Height.

Let's go to preview it in our browser. I'm going to refresh it. I'll jump out to my browser. And where's my working version? There it is there. The cool thing about this now is that, watch… it's an embedded map but Google are doing all this power, they're controlling this and making it work, and you can see, it can go to full screen and I can zoom in and out, and do all sorts of lovely things that you can do. That's my desk there. So Google goes through and-- all you need to do is pop in some big code which is an iframe, and Google takes control and makes all these really high value, very technical looking things, and it appears on your website but you don't have to do any of the work.