WEBVTT FILE





1
00:00:06.259 --> 00:00:12.179
in this video we're going to learn how to create iframes iframes are HTML

2
00:00:12.179 --> 00:00:19.410
documents which are embedded in other HTML documents there are used to include

3
00:00:19.410 --> 00:00:27.140
any external content like advertisements or a YouTube video or anything else

4
00:00:27.140 --> 00:00:33.059
okay so I've already created the iframes file so let's go ahead and create our

5
00:00:33.059 --> 00:00:42.360
first i frame so the tag we're going to need for that is iframe alright and

6
00:00:42.360 --> 00:00:46.770
we're gonna give it a few attributes so the first IC buttes is going to be the

7
00:00:46.770 --> 00:00:54.480
source of our iframe and for this first example we are going to give it us as a

8
00:00:54.480 --> 00:01:00.090
source one of our previous sub files so you're not pick up the paragraphs file

9
00:01:00.090 --> 00:01:05.760
for example okay so now you can see that we are populating the iframe with the

10
00:01:05.760 --> 00:01:12.030
content of the paragraphs HTML file there are other attributes we can use to

11
00:01:12.030 --> 00:01:19.170
resize the iframe so for example we can set the width to 200 pixels and the

12
00:01:19.170 --> 00:01:23.990
height as well concerti to 150 pixels okay also we can set the frame border to

13
00:01:32.720 --> 00:01:40.740
1 for example okay so that's our first iframe so the syntax is pretty

14
00:01:40.740 --> 00:01:46.350
straightforward just using iframe tags and we give it a source and we can set

15
00:01:46.350 --> 00:01:51.720
the dimensions as we want so now we're gonna create another iframe but this

16
00:01:51.720 --> 00:01:56.700
time is going to be a little bit different so so we're gonna create an

17
00:01:56.700 --> 00:02:03.600
iframe and rather than having the contents of the iframe with a specific

18
00:02:03.600 --> 00:02:09.420
source we're gonna add a link and once we click on the link we're gonna open

19
00:02:09.420 --> 00:02:13.770
the link inside the iframe okay so let's create the iframe first so

20
00:02:13.770 --> 00:02:20.970
we're gonna use the iframe tag okay and this time we're gonna need to give it a

21
00:02:20.970 --> 00:02:32.130
name okay so we're gonna I'm gonna name it's my eye frame and then we're gonna

22
00:02:32.130 --> 00:02:40.550
create a link so we're gonna put a link inside the paragraph okay and our link

23
00:02:40.550 --> 00:02:55.290
so put some text and our link first of all is going to have a nice roof okay so

24
00:02:55.290 --> 00:03:05.670
for example go into the Wikipedia homepage links they have another

25
00:03:05.670 --> 00:03:07.770
attributes that we haven't covered so far

26
00:03:07.770 --> 00:03:19.050
it's called target so if we set the target to blank for example okay and you

27
00:03:19.050 --> 00:03:25.800
click on the link it's gonna open in new tab okay that's what blank means all

28
00:03:25.800 --> 00:03:30.150
right but now we're gonna set the target to something else we're gonna set the

29
00:03:30.150 --> 00:03:38.010
target to the name of our iframe which is my iframe and now if we click on the

30
00:03:38.010 --> 00:03:44.090
link okay we're gonna need to refresh the page if we click on the link the

31
00:03:44.090 --> 00:03:52.740
page is gonna open inside our iframe okay alright now we cannot create our

32
00:03:52.740 --> 00:03:58.800
last example as you have noticed the iframes they are inline elements so we

33
00:03:58.800 --> 00:04:03.930
don't have any line break between iframes but we can other line break if

34
00:04:03.930 --> 00:04:13.980
you want to just by adding a br tag okay now let's create our last iframe but

35
00:04:13.980 --> 00:04:21.870
this one is going to be a little bit different okay so this iframe is going

36
00:04:21.870 --> 00:04:27.750
to have a YouTube video units so we're gonna give it a

37
00:04:27.750 --> 00:04:35.010
but this time let's go to youtube so I picked up this video so we're gonna do

38
00:04:35.010 --> 00:04:45.860
is just gonna go to share okay and then click on embed and you just copy this

39
00:04:45.860 --> 00:04:51.840
code okay you can you can copy the whole the whole code okay and just get rid of

40
00:04:51.840 --> 00:05:00.600
the iframe code that we started okay and if you go to your to the web page you

41
00:05:00.600 --> 00:05:05.310
can see the YouTube video that you can resize this if you want to so you can

42
00:05:05.310 --> 00:05:14.700
set the width to some other pixels for example and all 400 and the height to

43
00:05:14.700 --> 00:05:17.690
200 for example