1

00:00:00,060 --> 00:00:04,990

OK, guys, now we will know how to add images inside our Web site.



2

00:00:05,130 --> 00:00:12,080

We will know how to add maps and videos from YouTube inside our Web page here.



3

00:00:12,090 --> 00:00:21,120

The first thing we can do is to go to embed my map dot com, which is the alternative for the Google



4

00:00:21,120 --> 00:00:21,590

Maps.



5

00:00:22,770 --> 00:00:28,440

And then you can search for the address you want and then click enter.



6

00:00:28,740 --> 00:00:31,740

Now, I searched for University of Michigan.



7

00:00:32,550 --> 00:00:35,250

You can search for the University of Oxford.



8

00:00:39,460 --> 00:00:47,170

And then we have this university, and then if we want to make it responsive, just click on make my



9

00:00:47,170 --> 00:00:54,820

map responsive or if you want to edit that the width or the height, you can edit it from here if you



10

00:00:54,820 --> 00:00:55,000

wish.



11

00:00:55,040 --> 00:01:04,870

So but this is OK, we can click now on Generate Code and now we have this code, we can click on copy



12

00:01:05,680 --> 00:01:13,990

copied and then we can go back to our code editor inside the final project and just add that are.



13

00:01:16,260 --> 00:01:20,070

And now we pasted that could which we copied.



14

00:01:20,760 --> 00:01:24,780

We can go back to our Web page and reload.



15

00:01:27,340 --> 00:01:29,750

Waiting now we have the map.



16

00:01:30,010 --> 00:01:37,460

Let's see if it is responsive or not, when we make the screen smaller, the map is responsible.



17

00:01:37,510 --> 00:01:38,650

We will cancel this one.



18

00:01:39,490 --> 00:01:47,440

The problem is with the image and not with the map, but the map is compiled, frankly, and the map



19

00:01:47,440 --> 00:01:53,380

is great because we will use this map embedded inside our Web site.



20

00:01:53,980 --> 00:02:02,200

And now we're going to know how to add YouTube images, YouTube videos inside our Web site.



21

00:02:03,010 --> 00:02:06,340

We can go to the YouTube to whatever you want.



22

00:02:06,590 --> 00:02:09,100

I chose you for Michael Jackson.



23

00:02:09,550 --> 00:02:15,250

And now we can click on Scheyer when we click on Share.



24

00:02:15,370 --> 00:02:16,570

Now we got options.



25

00:02:16,570 --> 00:02:18,700

We will click on Impact.



26

00:02:20,970 --> 00:02:32,460

And now we can coffee this this could from here at 0.01, you can choose whatever you want and when



27

00:02:32,460 --> 00:02:42,730

we go back to our good and then we can basically here we can just add some space between them.



28

00:02:45,390 --> 00:02:49,770

OK, and you can we can make something different here.



29

00:02:50,610 --> 00:02:57,940

We can do this one and just make here we got the width of five, six oh pixels in the height of that.



30

00:02:58,140 --> 00:03:05,100

This is for the is spot where you want to make it responsive and more pipe friendly so we can just give



31

00:03:05,100 --> 00:03:08,600

it the width of one hundred percent.



32

00:03:09,780 --> 00:03:21,870

We can go back to our Web page and reload and we just to the height, let's try to give it a height



33

00:03:21,870 --> 00:03:24,850

of three one five inches.



34

00:03:24,940 --> 00:03:26,640

But again, we can just add more.



35

00:03:28,200 --> 00:03:31,730

We can just make it to six one five.



36

00:03:32,790 --> 00:03:33,650

This is OK.



37

00:03:33,660 --> 00:03:41,850

When we click here, we got a problem because we want to apply or we want to upload our website on a



38

00:03:41,850 --> 00:03:43,680

server to make it work.



39

00:03:43,830 --> 00:03:48,720

It would not work for the speech because it's not uploaded on a server.



40

00:03:48,900 --> 00:03:59,020

But this will be also responsive because it's taking one hundred percent off their screen whenever where



41

00:03:59,070 --> 00:04:05,970

whatever the screen with we will be taking one hundred percent of its screen and for the height we can



42

00:04:05,970 --> 00:04:08,370

also make it from there.



43

00:04:08,730 --> 00:04:18,930

So we wish to know we will later know how to make it from the CFS and now we know how to impact maps



44

00:04:18,930 --> 00:04:21,120

and videos from the YouTube.



45

00:04:21,480 --> 00:04:25,490

And now this is our final project for the team.



46

00:04:25,620 --> 00:04:29,280

Well, the problem is with the image, right?



47

00:04:30,240 --> 00:04:31,680

It's not compliance friendly.



48

00:04:31,680 --> 00:04:32,970

I'm going to show you why.



49

00:04:33,240 --> 00:04:35,700

When we make this screen smaller, we can drink.



50

00:04:36,240 --> 00:04:37,920

We don't want that.



51

00:04:38,400 --> 00:04:44,740

The best solution for this part before we move to the fees is to do the image jacket.



52

00:04:46,860 --> 00:04:51,060

And here we can just after that we can.



53

00:04:51,060 --> 00:04:57,260

And with one hundred percent or we can just add any you want.



54

00:04:58,410 --> 00:05:04,950

We now have to add in numbers and the that now the image is the responsive.



55

00:05:06,540 --> 00:05:10,410

It's always taking one hundred percent of the page.



56

00:05:11,850 --> 00:05:21,480

OK, so now this our first project for each team, which is the last one in the next section we will



57

00:05:21,480 --> 00:05:30,120

move to the phase three, which is responsible for the width and the responsive design of the images



58

00:05:30,120 --> 00:05:35,610

to being friendly and prevent the x axis scrolling.



59

00:05:36,150 --> 00:05:45,450

In the next video, we will move to how to add forms inside our website and then we will go to the scenes



60

00:05:45,840 --> 00:05:46,410

section.



61

00:05:46,890 --> 00:05:48,680

Good luck and have fun.