1
00:00:01,280 --> 00:00:09,530
Hello, in this video, I am going to show you how to embed an element like a video and make it responsive

2
00:00:09,530 --> 00:00:11,100
within the bootstrap system.

3
00:00:11,210 --> 00:00:11,960
Really simple.

4
00:00:11,960 --> 00:00:12,650
Really easy.

5
00:00:13,040 --> 00:00:19,620
First of all, you want to obviously you do this in some sort of class with a column attached to it.

6
00:00:19,640 --> 00:00:23,580
I've got 12 column, which is the maximum amount you could have sex free, whatever.

7
00:00:24,050 --> 00:00:28,400
And first of all, you need to put a div and then a class.

8
00:00:28,710 --> 00:00:31,220
And this is going to be an embed.

9
00:00:33,020 --> 00:00:34,670
Dash responsive.

10
00:00:36,320 --> 00:00:45,380
And then another one ambered, dash responsive, and then the ratio dash 16 by nine.

11
00:00:45,380 --> 00:00:52,100
So that obviously the very common ratio and I will provide a link to the bootstrap website so you can

12
00:00:52,100 --> 00:00:52,670
check it out.

13
00:00:52,880 --> 00:00:58,730
But on here in the help of the embed section, it shows the different ratio of available and essentially

14
00:00:58,730 --> 00:00:59,500
what is happening.

15
00:00:59,510 --> 00:01:02,040
You can create your own if you wanted to.

16
00:01:02,450 --> 00:01:05,760
So next, what we need to do is get an embed.

17
00:01:05,780 --> 00:01:08,820
So if you're on YouTube, for example, you can go to share.

18
00:01:09,230 --> 00:01:10,820
You can go to embed.

19
00:01:11,150 --> 00:01:13,610
And we can copy that.

20
00:01:16,650 --> 00:01:22,130
And then go down to here, paste it.

21
00:01:22,350 --> 00:01:27,810
OK, so we don't need a whiff on it because we're going to be making it responsive and not fixed.

22
00:01:28,680 --> 00:01:30,720
You can have a frame board if you want.

23
00:01:30,840 --> 00:01:31,880
We're going to remove that.

24
00:01:32,190 --> 00:01:38,280
You can also have this attribute that allowed you to do stuff like accelerometer or to play all the

25
00:01:38,280 --> 00:01:38,760
stuff.

26
00:01:38,910 --> 00:01:41,180
Again, I'm going to be removing that as well.

27
00:01:41,190 --> 00:01:42,520
That is totally up to you.

28
00:01:42,960 --> 00:01:46,680
And now we are also going to have a title.

29
00:01:47,160 --> 00:01:50,880
And for this epic video, feel free to put what you want.

30
00:01:51,180 --> 00:01:57,090
And obviously, I've left a life full screen for the user can go full screen, but feel free to remove

31
00:01:57,090 --> 00:01:59,170
that attribute if you don't want it.

32
00:01:59,550 --> 00:02:10,760
Next, we need a class and this is embed dash, responsive dash, quite a fly low.

33
00:02:10,770 --> 00:02:21,360
Now we get the video and if I start resizing it, as you can see it recited nicely, if I was to put

34
00:02:21,360 --> 00:02:31,890
this on six, then if I put another Dave here, put the class on hold and in theory, four of Perello.

35
00:02:34,160 --> 00:02:40,580
This is obviously what we would get and we can resolve it, so we work great within the bootstrap grid

36
00:02:40,580 --> 00:02:45,500
system, you can do loads of stuff like having tiles of different videos.

37
00:02:45,500 --> 00:02:47,870
Maybe you're creating sort of a YouTube like website.

38
00:02:48,230 --> 00:02:50,090
You can do that.

39
00:02:50,270 --> 00:02:51,010
So that is it.

40
00:02:51,020 --> 00:02:53,810
If you have any questions, feel free to pop me a message.

41
00:02:54,020 --> 00:02:57,940
And as usual, I look forward to seeing you in the next video.