Hey, my name is Dan. In this video we're gonna look at embedding. Now, embedding code is essentially taking other people's,  um, offerings. Say Google Maps or Google Calendars or Woo Forms,  or MailChimp  or any of these other companies that provide a service. They often allow you to embed their work. So it might be YouTube clip, it might be, there's all sorts  of ways you can embed things.

So the embedding is the term. So we're gonna do it with the Google map at the moment. So I'm gonna go to Google, I'm gonna go to Google Maps,  and I'm gonna go to my office. Where are you? Lemme see. Yeah, so,  and what I wanna do is we've got a really cool little,  um, inside view.

Okay? Like a Google Maps walk around  inside thing that we are gonna use. Now to do it, to get it, there's  that dotted line I kind of mentioned to earlier. I'm gonna click on this one. I'm gonna go this. So it says, share or embed embeds,  what I'm looking for, okay?

You'll find embeds everywhere. So shear is not what I want. I want embed. And what we're gonna do is, um,  medium know I wanna put a custom size in. Um, I know I want mine to be about 300 high from the site. And how wide.

Actually, I'm gonna make mine responsive  by putting in a hundred percent,  but I think I need to do that when it's out in Dreamweaver. I'm gonna copy it and I'm gonna jump into Dreamweaver. I'm gonna click inside this. Um, and I'm gonna go to code view here. Um, it's not gonna be pasted as text. 'cause if I past it here, it's gonna  be a big pile of junky text.

That doesn't really work. What I want to do is fine with that guy. Is there, he's there. Um, can you see this thing? It says, um, well, this little bit of code here,  that's a non breaking space that there is just there to,  if you remove it, the um,  column often collapses in Dreamweaver  and can't be seen so often. There's these, think of them, just a little placeholders.

You can leave them there, you can delete them. It's up to you. You make  it nice and clean to get rid of them. And I'm gonna paste this in here. What I'm also gonna do is I'm gonna add  an H Tml comment in here. So I'm gonna put in, this is  what an H Tml comment looks like.

Um, this is gonna be my Google map. And remember, comments are just here for, um, the,  the humans to see, okay, the browser and Google  and everybody else going to this website. That's a machine's gonna ignore anything  that's in these spaces here. You'll notice it's a little different from when it was  in, um, CSS. Okay? Um, but yeah, this is my Google map.

Now, if I go to Live View again, you notice it's in here,  but it's, I gave it a width of say, 800. So it's pointing out the side here. So what I'm gonna do is change the height of it. So I'm gonna go back to split view. I'm gonna find this. And in the code here, there's, um, Google of being nice  and kind of had the width and height pulled out of this.

Um, I frame or this, um, text here. So I'm gonna type in a hundred per cent. Okay? And it just means it's gonna fit the width. I'm gonna leave the height, 'cause a hundred percent width  height will end up going. Um, it'll, it'll go very, very tall.

Okay? It'll stretch the page out as far as it can go. Um, so a hundred percent width  And phi tight. Let's go to preview in our browser. I'm gonna refresh it. I jump out to my browser and where's my working version?

There it is there. The good thing about this now is  that watch, it's an embedded map,  but Google are doing all this power. They're, they're controlling this and making it work. And you can see I can go to full screen and I can zoom in  and out and do all sorts of lovely things that you can do. Um, that's my list there. So Google goes through  and all you need to do is pop in some embed code,  which is an iframe, and Google takes control  and makes all this really high value,  very technical looking things, um, appear on your website  where you don't have to do any of the work.