1

00:00:00,840  -->  00:00:04,130
The last section and we got some real content on the screen.

2

00:00:04,350  -->  00:00:08,880
So we're starting to make some real progress in this section we're going to focus more on the video

3

00:00:08,880  -->  00:00:14,970
detail the component that makes sure that the user can actually see the selected video and play it before

4

00:00:14,970  -->  00:00:16,570
we start putting this component together.

5

00:00:16,590  -->  00:00:20,880
I want to pause for a second or remind you about a question you should really be asking yourself before

6

00:00:20,880  -->  00:00:22,520
you write a new component.

7

00:00:22,770  -->  00:00:29,400
The question is this Do I expect this component to need to maintain any type of state.

8

00:00:29,610  -->  00:00:32,370
The video play there we're going to use here as a youtube embed.

9

00:00:32,400  -->  00:00:38,640
So in reality the video detail only really means needs to care about that video title the description

10

00:00:38,700  -->  00:00:40,850
and the you are Ehle of the video.

11

00:00:40,920  -->  00:00:45,150
Those are all properties that are available through props as they're going to be passed down from the

12

00:00:45,150  -->  00:00:46,460
app component.

13

00:00:47,100  -->  00:00:51,150
As such we don't really need any state here on the video detail.

14

00:00:51,210  -->  00:00:54,390
We really just need a simple functional component.

15

00:00:54,900  -->  00:01:00,000
So with that in mind we can get started on our video detail in video detail.

16

00:01:00,150  -->  00:01:04,200
Yes we'll start putting together some of the boilerplate that is going to get real.

17

00:01:04,200  -->  00:01:06,460
We're going to get really used to over time.

18

00:01:06,630  -->  00:01:14,530
So the top level right import re-act from react and then we'll define our functional components.

19

00:01:14,790  -->  00:01:20,960
Konst video detail props like so.

20

00:01:21,090  -->  00:01:26,510
And then we'll export default video detail.

21

00:01:27,470  -->  00:01:28,060
OK.

22

00:01:28,380  -->  00:01:33,000
So like the video list item this is going to have a pretty decent amount of markup in it to give it

23

00:01:33,060  -->  00:01:35,010
a pretty good amount of structure.

24

00:01:35,760  -->  00:01:38,350
So let's go ahead and get to it.

25

00:01:38,470  -->  00:01:48,570
Let me turn a big old blob of jazz X at the top level will have a div with the class name video detail

26

00:01:49,200  -->  00:01:52,230
and we'll give it a width of call M.D eight

27

00:01:54,570  -->  00:02:10,080
and we'll do a div class name embed responsive and bed responsive 16 by 9.

28

00:02:10,080  -->  00:02:14,190
So this is going to be wrapping the I-frame that we're going to use to display the video.

29

00:02:14,190  -->  00:02:15,970
We'll talk more about that in a second.

30

00:02:16,140  -->  00:02:17,760
Well actually that time is right now.

31

00:02:17,760  -->  00:02:18,270
Let's do it.

32

00:02:18,270  -->  00:02:27,810
I-frame with the class name of embed responsive item.

33

00:02:27,910  -->  00:02:29,590
So that's my frame.

34

00:02:30,210  -->  00:02:38,760
And then as a child to this does so not inside of the embed responsive will do a separate one div class

35

00:02:38,760  -->  00:02:44,380
name details and then inside of this div will have.

36

00:02:44,520  -->  00:02:52,390
Right now just two D divs one will be for the title and one will be for the description.

37

00:02:52,520  -->  00:02:52,910
OK.

38

00:02:52,920  -->  00:02:59,910
So with all this markup in place we're just going to get some values off the props object.

39

00:02:59,910  -->  00:03:02,710
So we got the props argument right here.

40

00:03:02,760  -->  00:03:06,300
We can go ahead and use the same as six syntax trick.

41

00:03:06,360  -->  00:03:10,200
So we don't really need props you know we need just the video property.

42

00:03:10,410  -->  00:03:18,870
So we'll use curly braces video and then we'll pull off just the video next we'll get out the title

43

00:03:19,680  -->  00:03:21,320
and description of the video.

44

00:03:21,630  -->  00:03:28,800
So Will do curly braces because we're can reference a javascript variable and we'll say video dot snippet

45

00:03:28,950  -->  00:03:32,260
dot title and then blow it.

46

00:03:32,430  -->  00:03:39,440
Video dot snippet dot description cool.

47

00:03:39,810  -->  00:03:42,670
Finally we need to get access to that.

48

00:03:43,010  -->  00:03:44,350
The embed you are l.

49

00:03:44,370  -->  00:03:47,640
So here's a little trick about YouTube videos.

50

00:03:47,940  -->  00:03:53,610
Whenever you want to embed a video or even just like navigate to video the only thing that changes in

51

00:03:53,610  -->  00:03:56,410
the you are l is the actual ID of the video.

52

00:03:56,580  -->  00:04:02,470
We have the ID inside this video object right here so we can actually craft our own embed you r l.

53

00:04:02,520  -->  00:04:03,120
I'll show you how.

54

00:04:03,120  -->  00:04:04,270
Let's just get to it.

55

00:04:04,680  -->  00:04:12,990
So we'll say Konst video ID video dot ID DOT video ID.

56

00:04:12,990  -->  00:04:16,990
Boy that's just a little confusing lying right there.

57

00:04:16,990  -->  00:04:18,700
Gee whiz.

58

00:04:18,720  -->  00:04:20,360
And then we'll make r u r l.

59

00:04:20,730  -->  00:04:32,140
So say Konst you are l is h t t P S slash slash w w w dot Utu dot com slash embed.

60

00:04:32,550  -->  00:04:36,460
Plus the video Id like so.

61

00:04:37,410  -->  00:04:41,940
So this will Krafty your L and it looks like you know basically YouTube dot com slash embed.

62

00:04:41,960  -->  00:04:48,790
Oh I missed a slap on the head and here make sure YouTube dot com slash imbeds slash video ID.

63

00:04:49,200  -->  00:04:57,510
And that's just about any video as long as we've got a video ID creating an I-frame which we have right

64

00:04:57,510  -->  00:05:03,570
here which points to this Eurail will show a YouTube video player inside of our application for us.

65

00:05:03,570  -->  00:05:09,140
So before we make use of this you or I'll want to make use of a tiny little Another little bit of yes

66

00:05:09,210  -->  00:05:11,910
six magic.

67

00:05:11,910  -->  00:05:16,820
Right now we've got a string and we're just adding on another string to it at the end you know the video

68

00:05:16,850  -->  00:05:18,320
ID basically.

69

00:05:18,600  -->  00:05:22,910
We can use what's called String interpolation or template strings actually.

70

00:05:22,960  -->  00:05:30,720
And yes 6 so we'll write a single string but we'll interpolate or inject or you know Beazeley shove

71

00:05:30,720  -->  00:05:35,620
in for lack of a better term a javascript variable into the string as well.

72

00:05:35,970  -->  00:05:43,590
So we're going to do that by deleting the two quotes and then we're going to wrap the string with back

73

00:05:43,590  -->  00:05:44,310
ticks.

74

00:05:44,310  -->  00:05:48,290
This is the button to the left of the one on your keyboard.

75

00:05:48,540  -->  00:05:50,330
So it specifically has to be a tactic.

76

00:05:50,340  -->  00:05:51,980
It can't be like a single quote.

77

00:05:51,990  -->  00:06:00,090
Make sure it's a back tick and then inside of here we can write dollar sign and then curly brace video

78

00:06:00,180  -->  00:06:02,790
ID and delete everything else.

79

00:06:03,090  -->  00:06:11,850
So this is exactly the same as writing you know blah blah blah slash embed slash plus video ID the exact

80

00:06:11,850  -->  00:06:12,540
same thing.

81

00:06:12,750  -->  00:06:17,430
You're just joining the two together and something that looks a little bit more legible especially with

82

00:06:17,430  -->  00:06:21,930
the syntax highlighting it's much more easy to you know really figure out what's going on with the string

83

00:06:21,940  -->  00:06:22,730
.

84

00:06:23,490  -->  00:06:24,000
OK.

85

00:06:24,180  -->  00:06:25,680
So let's go ahead and say this.

86

00:06:25,700  -->  00:06:26,830
To save it.

87

00:06:27,030  -->  00:06:29,040
I actually need to do one more thing in here.

88

00:06:29,160  -->  00:06:33,930
We need to make use of the I-frame by providing the URL to it.

89

00:06:33,930  -->  00:06:35,430
So I frame's in general.

90

00:06:35,460  -->  00:06:39,690
All you've got to do is provide a source and then your browser will go out and you know reach out to

91

00:06:39,690  -->  00:06:42,960
the URL and place whatever content inside the iframe.

92

00:06:42,960  -->  00:06:44,940
So it will provide it as sarcy.

93

00:06:45,150  -->  00:06:49,600
We're going to make reference to a javascript variable so the curly braces you are l.

94

00:06:49,620  -->  00:06:49,890
All right.

95

00:06:49,890  -->  00:06:56,710
Now let's save it and let's refresh and.

96

00:06:56,760  -->  00:06:57,200
Oh yeah.

97

00:06:57,330  -->  00:06:58,360
Nothing yet.

98

00:06:58,880  -->  00:07:02,810
I forgot we still have to put it inside of our index component and we're not quite there yet.

99

00:07:02,850  -->  00:07:04,950
So let's do that inside the next section.