In this section we're going to start to figure out how we can get our video detail component to show
an actual video player on the screen.
Now doing this is going to be ways here than you might imagine.
All it requires is a little bit of understanding about a basic each female element called the I-frame
tag.
So we're going to do here is create a I-frame tag.
The I-frame is just like any other HTL tag such as a div a span a table or a form.
The difference is that an I-frame is going to attempt to make a request to some outside Web site besides
the one that the user is currently visiting on the screen.
So we're going to create this I-frame element and then tell it to make a request on its own without
any Ajax stuff or anything like that.
Over to some very specific YouTube address once that makes that request YouTube will reply with all
the H email and Javascript required to show a video player on the screen right there.
Like I said this ends up being a little bit easier than you might imagine.
So let's just give us a quick shot and see how we do.
All right.
So I flip back over to my code editor I'm inside my video detail right above my div with you I segment.
I'm going to add a new div with a class name of UI embedded so inside of here we're going to place our
I-frame.
And this is going to get a source telling it where it needs to make a request to to get the content
for this I-frame the class name on the div outside of it.
Of you I embed is a very special semantic UI class name that just tells it that we're about to put a
embedded video player inside of your head so semantic UI is going to apply a little bit of styling to
this thing to make sure that the video actual video player shows up appropriately.
OK so now how do we pass this I-frame it's source property.
Let's go take a look at a video on YouTube right now and I'll show you how you can very easily understand
how to put inappropriate I-frame into your application.
All right so I'm going to open up a new browser tab and navigate to YouTube.
Now once over here you can click on any video you want about this right here.
I told my parents or something whatever I don't really care if we go underneath this thing you'll find
that underneath the video description the share button right there.
So we're going to click on share.
It's going to pop open this dialogue right here and we want to find the button that says embed.
And so when you click on that it's going to show you the appropriate I-frame to display to get the video
to appear.
Now if you look at this thing carefully we're not going to do a copy paste because this is an I-frame
Taylor to show this very specific video.
But what's relevant is you'll notice the Cercy property right here goes to US YouTube dot com slash
embed.
And then it's got a little string of numbers and letters after that that string of numbers and letters
after the word embed right there is this very particular videos ID.
Now I don't know if you recall but we've actually seen several times the ID's of each video that we
have fetched inside of our quest log.
Let me show you really quick.
I'm going to go back over to my application as usual I will open up my network requests log and do a
quick search here.
So there's my search QUEST.
I can look at the preview tab fine items expand any of the video items and then you'll notice there's
this ID object if I expand the ID object.
There's a property in there called the video ID.
So that is the idea for this very specific video right here.
So if I just reference that ID or take that ID right there and stick it into this you are l in place
of the existing ID and then take that your L and stick it into our I-frame tag it will display our video
player on the screen for us automatically.
So let's get that shot.
I'm going to flip back over to my editor still inside the video detail.
And then underneath my statement I'll say Konst video.
RC So this is the source link for the I-frame that we're going to put together right here.
I'll say HTP us are inside of a string.
Yes Colon slash slash.
W w w you to dot com slash embed a slash and then right here.
We want to put the actual ID of our particular video so we could do that either by joining it on as
a string or string concatenation like so or we can use it.
Yes 20:15 template string.
Let's use a little bit of yes 20:15 here.
So instead of the single quotes I'm going replace them with back ticks on both sides so back take one
back to two and then at the very end I'll put in my dollar sign curly braces and then I'll reference
the video ID with video ID that references that object.
Let's look at it very quickly where is it.
Oh no I lost it that references the object right here.
So inside that object you want to specifically reference video Id say DOT video ID now extremely important
here.
Make sure you have a lower case D.
You have an upper case D.
It's not going to work.
Make sure you have a lower case D.
So now that we've got the video SIRC put together we can reference that inside the I-frame.
So it's say video SIRC right there OK.
And that's pretty much it.
So we can now save this flip back over to the browser.
Do a search click on a entry in there and I'll see the video appear.
And if I click on the play button the video will start playing as you would expect.
Now if you see a message right here that says video cannot load.
Or like just about any error message whatsoever.
I can just about guarantee you that you made a typo inside of this you are right here.
So if you see an error message please triple check this line right here because that is almost always
the source of the air.
All right.
So this looks pretty good.
Now couple quick things I want to mention here.
You'll notice that we now have all these different errors appearing inside of our terminal.
One error right here is the key warning or the key error that we have not fixed up.
We're going to address that in just a minute but I have got a ton more errors inside of here.
If you see a ton of errors like this or any other javascript errors they are all ears that are being
thrown by the YouTube I-frame or the YouTube video player.
You and I do not have control over those errors.
So you can safely ignore any errors that you see.
Many of the errors that I see right here and that you might see as well are very likely being displayed
by any ad Walker that you might be running.
So if you have an ad blocker going chances are it is producing some number of these error specifically
the ones that say air blocked by client.
All right.
Now one last thing I want to show you is we should be told to click on some other video on the list
and see the player update with that new video I can click on another video I can click on another video
and it always shows the new one I click on.
And likewise if I do a search here for say flowers I should see a new list of videos appear down here.
Let's do something other than flowers because those are kind of inappropriate videos a sigh tree.
Like.
Much better.
So all OK.
She is you know YouTube has nothing but inappropriate videos about children's stories.
Stick with something safe here.
All right much better so I can click on one of these and see the appropriate video appear on the screen.
OK.
So 6:03 good.
We saw a couple of things to fix up here.
First off the original mockup that we looked at said that we wanted the video detail to be next to our
list of videos appearing on the right hand side.
So we probably need to fix that.
The other thing you'll notice is that anytime we update our search term like let's say other children's
stories the original video is displaying on the screen still even though the list of videos down here
are very different which is a little bit unexpected.
So I think that we need to still do a little bit of work here.
Let's take a quick possible start to address a couple of loose ends in the next video.