In this video we're going to start to improve the styling on our video detail component.
So rather than just showing the title at the very top as we are right now we should instead.
Ellie show this kind of little panel underneath it with a video title and then the description underneath.
So let's get to it.
Back inside my code editor I'll find the video detail a component and then I'm going to expand this
into a multi-line GSX expression like so as usual.
Don't forget to clean up the semi-colon at the end of that line.
Then inside of here I'll put in a new line and I'm going to wrap the video did.
Or the video snippet title with a new div that has a class name of UI segment.
We've used the segment before member.
It's essentially just going to show a nice looking box exactly like we have it in our matka inside of
the segments.
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
off the H for on the other side.
Then after the H for a place a paragraph tag and inside the paragraph tag is where I want to put my
video's description.
Now when we use this title property right here I kind of just very quickly through video snippet title
upon the screen and said oh yeah you can go verify this yourself if you want to.
Now I'm not going to do the same thing twice in a row and tell you to go figure out the description
yourself or just throw the code up your let's do a quick double check and make sure we understand how
to reference the videos description property so I'll flip back over refreshed the page and I'll do another
search here for again I'll do buildings now in my request log.
MEMBER I've got my network tab right here.
I can find the search requests that we just made if I click on Preview I can look at the different videos
that were fetched and then inside of these videos I can expand the snippet property and inside that
snippet object right there is the videos description.
So there's the string it says Amazing amazing implosions.
Check out this video.
Blah blah blah.
So that right there is the string that we want to print up on the screen underneath the video's title
and just for reference There's the video title right there.
All right.
So in other words right here inside the paragraph tag we want to reference video that snippet that description
like the.
All right.
Let's do another test.
I'll save this file.
There is our refresh our search for buildings again.
And now when I click on one of these I should see the nice segment you can select that nice panel with
the bolded title at the top and in the video description underneath it.
Perfect.
All right.
So this looks pretty good.
The last thing we really have to do here before we are almost finished with this application is make
sure that we can actually show a video player on the screen.
So let's take a quick pause right here.
When we come back the next section we'll figure out how we can show each one these videos as a playable
YouTube video player right above these little title panels so quick pause and I'll see you in just a
minute.