1
00:00:00,820 --> 00:00:04,910
In this video we're going to start to improve the styling on our video detail component.

2
00:00:04,960 --> 00:00:10,000
So rather than just showing the title at the very top as we are right now we should instead.

3
00:00:10,030 --> 00:00:15,340
Ellie show this kind of little panel underneath it with a video title and then the description underneath.

4
00:00:15,520 --> 00:00:17,340
So let's get to it.

5
00:00:17,340 --> 00:00:22,270
Back inside my code editor I'll find the video detail a component and then I'm going to expand this

6
00:00:22,270 --> 00:00:26,490
into a multi-line GSX expression like so as usual.

7
00:00:26,500 --> 00:00:29,330
Don't forget to clean up the semi-colon at the end of that line.

8
00:00:30,410 --> 00:00:37,420
Then inside of here I'll put in a new line and I'm going to wrap the video did.

9
00:00:37,440 --> 00:00:48,190
Or the video snippet title with a new div that has a class name of UI segment.

10
00:00:48,380 --> 00:00:50,520
We've used the segment before member.

11
00:00:50,510 --> 00:00:55,940
It's essentially just going to show a nice looking box exactly like we have it in our matka inside of

12
00:00:55,940 --> 00:00:56,560
the segments.

13
00:00:56,570 --> 00:01:04,430
I'm going to wrap the video title with an H for tag that has a class name of UI Hetter and I'll close

14
00:01:04,430 --> 00:01:06,600
off the H for on the other side.

15
00:01:09,100 --> 00:01:14,560
Then after the H for a place a paragraph tag and inside the paragraph tag is where I want to put my

16
00:01:14,620 --> 00:01:16,290
video's description.

17
00:01:16,360 --> 00:01:21,250
Now when we use this title property right here I kind of just very quickly through video snippet title

18
00:01:21,280 --> 00:01:25,380
upon the screen and said oh yeah you can go verify this yourself if you want to.

19
00:01:25,410 --> 00:01:29,440
Now I'm not going to do the same thing twice in a row and tell you to go figure out the description

20
00:01:29,500 --> 00:01:33,730
yourself or just throw the code up your let's do a quick double check and make sure we understand how

21
00:01:33,730 --> 00:01:41,920
to reference the videos description property so I'll flip back over refreshed the page and I'll do another

22
00:01:41,920 --> 00:01:46,420
search here for again I'll do buildings now in my request log.

23
00:01:46,430 --> 00:01:48,040
MEMBER I've got my network tab right here.

24
00:01:48,050 --> 00:01:54,540
I can find the search requests that we just made if I click on Preview I can look at the different videos

25
00:01:54,540 --> 00:02:00,570
that were fetched and then inside of these videos I can expand the snippet property and inside that

26
00:02:00,570 --> 00:02:04,140
snippet object right there is the videos description.

27
00:02:04,170 --> 00:02:06,990
So there's the string it says Amazing amazing implosions.

28
00:02:06,990 --> 00:02:07,800
Check out this video.

29
00:02:07,800 --> 00:02:08,780
Blah blah blah.

30
00:02:09,060 --> 00:02:13,980
So that right there is the string that we want to print up on the screen underneath the video's title

31
00:02:14,280 --> 00:02:18,310
and just for reference There's the video title right there.

32
00:02:18,330 --> 00:02:18,570
All right.

33
00:02:18,570 --> 00:02:25,290
So in other words right here inside the paragraph tag we want to reference video that snippet that description

34
00:02:25,580 --> 00:02:28,220
like the.

35
00:02:28,230 --> 00:02:28,430
All right.

36
00:02:28,440 --> 00:02:29,450
Let's do another test.

37
00:02:29,460 --> 00:02:30,490
I'll save this file.

38
00:02:32,400 --> 00:02:36,190
There is our refresh our search for buildings again.

39
00:02:36,320 --> 00:02:42,410
And now when I click on one of these I should see the nice segment you can select that nice panel with

40
00:02:42,410 --> 00:02:45,970
the bolded title at the top and in the video description underneath it.

41
00:02:46,310 --> 00:02:47,710
Perfect.

42
00:02:47,720 --> 00:02:48,080
All right.

43
00:02:48,080 --> 00:02:49,070
So this looks pretty good.

44
00:02:49,070 --> 00:02:53,870
The last thing we really have to do here before we are almost finished with this application is make

45
00:02:53,870 --> 00:02:57,290
sure that we can actually show a video player on the screen.

46
00:02:57,290 --> 00:02:58,800
So let's take a quick pause right here.

47
00:02:58,850 --> 00:03:03,710
When we come back the next section we'll figure out how we can show each one these videos as a playable

48
00:03:03,800 --> 00:03:09,350
YouTube video player right above these little title panels so quick pause and I'll see you in just a

49
00:03:09,350 --> 00:03:09,760
minute.