The last section and we got some real content on the screen. 2
So we're starting to make some real progress in this section we're going to focus more on the video 3
detail the component that makes sure that the user can actually see the selected video and play it before 4
we start putting this component together. 5
I want to pause for a second or remind you about a question you should really be asking yourself before 6
you write a new component. 7
The question is this Do I expect this component to need to maintain any type of state. 8
The video play there we're going to use here as a youtube embed. 9
So in reality the video detail only really means needs to care about that video title the description 10
and the you are Ehle of the video. 11
Those are all properties that are available through props as they're going to be passed down from the 12
app component. 13
As such we don't really need any state here on the video detail. 14
We really just need a simple functional component. 15
So with that in mind we can get started on our video detail in video detail. 16
Yes we'll start putting together some of the boilerplate that is going to get real. 17
We're going to get really used to over time. 18
So the top level right import re-act from react and then we'll define our functional components. 19
Konst video detail props like so. 20
And then we'll export default video detail. 21
OK. 22
So like the video list item this is going to have a pretty decent amount of markup in it to give it 23
a pretty good amount of structure. 24
So let's go ahead and get to it. 25
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
and we'll give it a width of call M.D eight 27
and we'll do a div class name embed responsive and bed responsive 16 by 9. 28
So this is going to be wrapping the I-frame that we're going to use to display the video. 29
We'll talk more about that in a second. 30
Well actually that time is right now. 31
Let's do it. 32
I-frame with the class name of embed responsive item. 33
So that's my frame. 34
And then as a child to this does so not inside of the embed responsive will do a separate one div class 35
name details and then inside of this div will have. 36
Right now just two D divs one will be for the title and one will be for the description. 37
OK. 38
So with all this markup in place we're just going to get some values off the props object. 39
So we got the props argument right here. 40
We can go ahead and use the same as six syntax trick. 41
So we don't really need props you know we need just the video property. 42
So we'll use curly braces video and then we'll pull off just the video next we'll get out the title 43
and description of the video. 44
So Will do curly braces because we're can reference a javascript variable and we'll say video dot snippet 45
dot title and then blow it. 46
Video dot snippet dot description cool. 47
Finally we need to get access to that. 48
The embed you are l. 49
So here's a little trick about YouTube videos. 50
Whenever you want to embed a video or even just like navigate to video the only thing that changes in 51
the you are l is the actual ID of the video. 52
We have the ID inside this video object right here so we can actually craft our own embed you r l. 53
I'll show you how. 54
Let's just get to it. 55
So we'll say Konst video ID video dot ID DOT video ID. 56
Boy that's just a little confusing lying right there. 57
Gee whiz. 58
And then we'll make r u r l. 59
So say Konst you are l is h t t P S slash slash w w w dot Utu dot com slash embed. 60
Plus the video Id like so. 61
So this will Krafty your L and it looks like you know basically YouTube dot com slash embed. 62
Oh I missed a slap on the head and here make sure YouTube dot com slash imbeds slash video ID. 63
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
here which points to this Eurail will show a YouTube video player inside of our application for us. 65
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
six magic. 67
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
ID basically. 69
We can use what's called String interpolation or template strings actually. 70
And yes 6 so we'll write a single string but we'll interpolate or inject or you know Beazeley shove 71
in for lack of a better term a javascript variable into the string as well. 72
So we're going to do that by deleting the two quotes and then we're going to wrap the string with back 73
ticks. 74
This is the button to the left of the one on your keyboard. 75
So it specifically has to be a tactic. 76
It can't be like a single quote. 77
Make sure it's a back tick and then inside of here we can write dollar sign and then curly brace video 78
ID and delete everything else. 79
So this is exactly the same as writing you know blah blah blah slash embed slash plus video ID the exact 80
same thing. 81
You're just joining the two together and something that looks a little bit more legible especially with 82
the syntax highlighting it's much more easy to you know really figure out what's going on with the string 83
. 84
OK. 85
So let's go ahead and say this. 86
To save it. 87
I actually need to do one more thing in here. 88
We need to make use of the I-frame by providing the URL to it. 89
So I frame's in general. 90
All you've got to do is provide a source and then your browser will go out and you know reach out to 91
the URL and place whatever content inside the iframe. 92
So it will provide it as sarcy. 93
We're going to make reference to a javascript variable so the curly braces you are l. 94
All right. 95
Now let's save it and let's refresh and. 96
Oh yeah. 97
Nothing yet. 98
I forgot we still have to put it inside of our index component and we're not quite there yet. 99
So let's do that inside the next section.