1 00:00:00,680 --> 00:00:04,520 In this section we're going to start to figure out how we can get our video detail component to show 2 00:00:04,520 --> 00:00:07,110 an actual video player on the screen. 3 00:00:07,220 --> 00:00:10,160 Now doing this is going to be ways here than you might imagine. 4 00:00:10,160 --> 00:00:16,760 All it requires is a little bit of understanding about a basic each female element called the I-frame 5 00:00:16,760 --> 00:00:17,650 tag. 6 00:00:17,840 --> 00:00:20,930 So we're going to do here is create a I-frame tag. 7 00:00:21,140 --> 00:00:27,070 The I-frame is just like any other HTL tag such as a div a span a table or a form. 8 00:00:27,090 --> 00:00:32,810 The difference is that an I-frame is going to attempt to make a request to some outside Web site besides 9 00:00:32,810 --> 00:00:35,570 the one that the user is currently visiting on the screen. 10 00:00:35,570 --> 00:00:40,790 So we're going to create this I-frame element and then tell it to make a request on its own without 11 00:00:40,820 --> 00:00:42,730 any Ajax stuff or anything like that. 12 00:00:42,830 --> 00:00:49,860 Over to some very specific YouTube address once that makes that request YouTube will reply with all 13 00:00:49,860 --> 00:00:54,990 the H email and Javascript required to show a video player on the screen right there. 14 00:00:55,020 --> 00:00:58,070 Like I said this ends up being a little bit easier than you might imagine. 15 00:00:58,110 --> 00:01:01,420 So let's just give us a quick shot and see how we do. 16 00:01:01,430 --> 00:01:01,730 All right. 17 00:01:01,730 --> 00:01:09,640 So I flip back over to my code editor I'm inside my video detail right above my div with you I segment. 18 00:01:09,710 --> 00:01:19,530 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 19 00:01:19,530 --> 00:01:20,760 I-frame. 20 00:01:21,120 --> 00:01:25,950 And this is going to get a source telling it where it needs to make a request to to get the content 21 00:01:25,950 --> 00:01:29,160 for this I-frame the class name on the div outside of it. 22 00:01:29,160 --> 00:01:34,760 Of you I embed is a very special semantic UI class name that just tells it that we're about to put a 23 00:01:34,770 --> 00:01:39,600 embedded video player inside of your head so semantic UI is going to apply a little bit of styling to 24 00:01:39,600 --> 00:01:44,860 this thing to make sure that the video actual video player shows up appropriately. 25 00:01:45,210 --> 00:01:49,130 OK so now how do we pass this I-frame it's source property. 26 00:01:49,140 --> 00:01:54,180 Let's go take a look at a video on YouTube right now and I'll show you how you can very easily understand 27 00:01:54,180 --> 00:01:57,040 how to put inappropriate I-frame into your application. 28 00:01:58,280 --> 00:02:02,810 All right so I'm going to open up a new browser tab and navigate to YouTube. 29 00:02:03,850 --> 00:02:08,360 Now once over here you can click on any video you want about this right here. 30 00:02:08,360 --> 00:02:13,810 I told my parents or something whatever I don't really care if we go underneath this thing you'll find 31 00:02:13,810 --> 00:02:17,050 that underneath the video description the share button right there. 32 00:02:17,330 --> 00:02:19,610 So we're going to click on share. 33 00:02:19,660 --> 00:02:25,070 It's going to pop open this dialogue right here and we want to find the button that says embed. 34 00:02:25,190 --> 00:02:29,770 And so when you click on that it's going to show you the appropriate I-frame to display to get the video 35 00:02:29,770 --> 00:02:31,030 to appear. 36 00:02:31,030 --> 00:02:35,080 Now if you look at this thing carefully we're not going to do a copy paste because this is an I-frame 37 00:02:35,080 --> 00:02:37,780 Taylor to show this very specific video. 38 00:02:37,960 --> 00:02:44,710 But what's relevant is you'll notice the Cercy property right here goes to US YouTube dot com slash 39 00:02:44,800 --> 00:02:45,590 embed. 40 00:02:45,790 --> 00:02:51,220 And then it's got a little string of numbers and letters after that that string of numbers and letters 41 00:02:51,310 --> 00:02:56,030 after the word embed right there is this very particular videos ID. 42 00:02:56,080 --> 00:03:00,850 Now I don't know if you recall but we've actually seen several times the ID's of each video that we 43 00:03:00,850 --> 00:03:03,100 have fetched inside of our quest log. 44 00:03:03,370 --> 00:03:05,010 Let me show you really quick. 45 00:03:05,230 --> 00:03:12,630 I'm going to go back over to my application as usual I will open up my network requests log and do a 46 00:03:12,630 --> 00:03:14,140 quick search here. 47 00:03:14,250 --> 00:03:15,970 So there's my search QUEST. 48 00:03:16,260 --> 00:03:22,280 I can look at the preview tab fine items expand any of the video items and then you'll notice there's 49 00:03:22,290 --> 00:03:25,880 this ID object if I expand the ID object. 50 00:03:25,870 --> 00:03:28,450 There's a property in there called the video ID. 51 00:03:28,740 --> 00:03:33,100 So that is the idea for this very specific video right here. 52 00:03:33,480 --> 00:03:42,470 So if I just reference that ID or take that ID right there and stick it into this you are l in place 53 00:03:42,470 --> 00:03:49,070 of the existing ID and then take that your L and stick it into our I-frame tag it will display our video 54 00:03:49,070 --> 00:03:51,350 player on the screen for us automatically. 55 00:03:51,740 --> 00:03:53,190 So let's get that shot. 56 00:03:53,630 --> 00:03:59,090 I'm going to flip back over to my editor still inside the video detail. 57 00:03:59,290 --> 00:04:02,730 And then underneath my statement I'll say Konst video. 58 00:04:02,850 --> 00:04:08,410 RC So this is the source link for the I-frame that we're going to put together right here. 59 00:04:08,890 --> 00:04:12,480 I'll say HTP us are inside of a string. 60 00:04:12,510 --> 00:04:15,040 Yes Colon slash slash. 61 00:04:15,100 --> 00:04:21,330 W w w you to dot com slash embed a slash and then right here. 62 00:04:21,370 --> 00:04:27,340 We want to put the actual ID of our particular video so we could do that either by joining it on as 63 00:04:27,340 --> 00:04:30,360 a string or string concatenation like so or we can use it. 64 00:04:30,370 --> 00:04:32,280 Yes 20:15 template string. 65 00:04:32,500 --> 00:04:34,930 Let's use a little bit of yes 20:15 here. 66 00:04:35,230 --> 00:04:42,050 So instead of the single quotes I'm going replace them with back ticks on both sides so back take one 67 00:04:42,050 --> 00:04:48,320 back to two and then at the very end I'll put in my dollar sign curly braces and then I'll reference 68 00:04:48,320 --> 00:04:53,860 the video ID with video ID that references that object. 69 00:04:53,900 --> 00:04:56,020 Let's look at it very quickly where is it. 70 00:04:56,240 --> 00:04:59,540 Oh no I lost it that references the object right here. 71 00:04:59,540 --> 00:05:07,640 So inside that object you want to specifically reference video Id say DOT video ID now extremely important 72 00:05:07,640 --> 00:05:07,990 here. 73 00:05:08,000 --> 00:05:10,850 Make sure you have a lower case D. 74 00:05:10,970 --> 00:05:11,840 You have an upper case D. 75 00:05:11,840 --> 00:05:12,740 It's not going to work. 76 00:05:12,740 --> 00:05:14,880 Make sure you have a lower case D. 77 00:05:17,050 --> 00:05:22,340 So now that we've got the video SIRC put together we can reference that inside the I-frame. 78 00:05:22,440 --> 00:05:26,420 So it's say video SIRC right there OK. 79 00:05:26,430 --> 00:05:27,900 And that's pretty much it. 80 00:05:27,930 --> 00:05:32,450 So we can now save this flip back over to the browser. 81 00:05:35,170 --> 00:05:41,220 Do a search click on a entry in there and I'll see the video appear. 82 00:05:41,410 --> 00:05:45,470 And if I click on the play button the video will start playing as you would expect. 83 00:05:45,470 --> 00:05:49,220 Now if you see a message right here that says video cannot load. 84 00:05:49,250 --> 00:05:52,160 Or like just about any error message whatsoever. 85 00:05:52,280 --> 00:05:57,390 I can just about guarantee you that you made a typo inside of this you are right here. 86 00:05:57,410 --> 00:06:02,570 So if you see an error message please triple check this line right here because that is almost always 87 00:06:02,570 --> 00:06:07,380 the source of the air. 88 00:06:07,390 --> 00:06:07,620 All right. 89 00:06:07,630 --> 00:06:08,750 So this looks pretty good. 90 00:06:08,800 --> 00:06:11,240 Now couple quick things I want to mention here. 91 00:06:11,290 --> 00:06:16,170 You'll notice that we now have all these different errors appearing inside of our terminal. 92 00:06:16,240 --> 00:06:20,590 One error right here is the key warning or the key error that we have not fixed up. 93 00:06:20,590 --> 00:06:25,330 We're going to address that in just a minute but I have got a ton more errors inside of here. 94 00:06:25,420 --> 00:06:29,800 If you see a ton of errors like this or any other javascript errors they are all ears that are being 95 00:06:29,800 --> 00:06:33,710 thrown by the YouTube I-frame or the YouTube video player. 96 00:06:33,810 --> 00:06:36,090 You and I do not have control over those errors. 97 00:06:36,190 --> 00:06:38,900 So you can safely ignore any errors that you see. 98 00:06:39,190 --> 00:06:44,080 Many of the errors that I see right here and that you might see as well are very likely being displayed 99 00:06:44,080 --> 00:06:46,830 by any ad Walker that you might be running. 100 00:06:46,840 --> 00:06:51,910 So if you have an ad blocker going chances are it is producing some number of these error specifically 101 00:06:51,910 --> 00:06:55,600 the ones that say air blocked by client. 102 00:06:55,600 --> 00:06:55,920 All right. 103 00:06:55,920 --> 00:07:01,050 Now one last thing I want to show you is we should be told to click on some other video on the list 104 00:07:01,830 --> 00:07:07,640 and see the player update with that new video I can click on another video I can click on another video 105 00:07:08,280 --> 00:07:11,040 and it always shows the new one I click on. 106 00:07:11,030 --> 00:07:17,170 And likewise if I do a search here for say flowers I should see a new list of videos appear down here. 107 00:07:17,190 --> 00:07:21,940 Let's do something other than flowers because those are kind of inappropriate videos a sigh tree. 108 00:07:22,130 --> 00:07:22,350 Like. 109 00:07:22,380 --> 00:07:23,280 Much better. 110 00:07:23,280 --> 00:07:24,420 So all OK. 111 00:07:24,520 --> 00:07:29,040 She is you know YouTube has nothing but inappropriate videos about children's stories. 112 00:07:29,140 --> 00:07:30,450 Stick with something safe here. 113 00:07:30,450 --> 00:07:35,770 All right much better so I can click on one of these and see the appropriate video appear on the screen. 114 00:07:36,150 --> 00:07:36,380 OK. 115 00:07:36,390 --> 00:07:37,330 So 6:03 good. 116 00:07:37,330 --> 00:07:39,510 We saw a couple of things to fix up here. 117 00:07:39,540 --> 00:07:45,480 First off the original mockup that we looked at said that we wanted the video detail to be next to our 118 00:07:45,570 --> 00:07:47,750 list of videos appearing on the right hand side. 119 00:07:48,000 --> 00:07:49,950 So we probably need to fix that. 120 00:07:49,950 --> 00:07:56,040 The other thing you'll notice is that anytime we update our search term like let's say other children's 121 00:07:56,040 --> 00:08:03,250 stories the original video is displaying on the screen still even though the list of videos down here 122 00:08:03,310 --> 00:08:06,970 are very different which is a little bit unexpected. 123 00:08:07,360 --> 00:08:10,160 So I think that we need to still do a little bit of work here. 124 00:08:10,270 --> 00:08:14,160 Let's take a quick possible start to address a couple of loose ends in the next video.