Hello. All right. So we just ended our last cast finishing up building up this top section of the work area here. Um And now we're gonna get started with the I frame and then finish up this work section. So for the I frame, what we want to do is dr is gonna be a little bit trickier to work with because we want the I frame to have a responsive um like we want it to be responsive for the size of the video inside of it. So what we're gonna do is we will go ahead and we will create a another dip here. I know everyone that's like, I'm my semantic. Html skills need some work because I am the queen of just putting ribs after gives after dibs. And I know it makes a lot of people want to lose their minds. So we're gonna give this a class, we're gonna give this a deflects class like everything else. And I know they were just going to justify this one to the end because we want the video to be on this side here. Um And then we're going to take a wild guess, make another drift. We're going to say um we'll do an I frame computer class. We're going to set some stuff to hear. Now. We need to actually go get our videos that we want to embed. So I'm going to go to my podcast here. I'm going to go to my profile. I'm going to say, we want to embed this one here. Um something up the full player. So yeah, this is a nice view. We will do share and we just need to click on this in bed right here and we're going to pay stuff there. So I'll show you why we need to do some work to set up the size. So if we just save it like this, it's going to be teeny teeny tiny. Um and so we do need to do that. So what we're gonna do is we're gonna add a class to this I frame called responsive. I frame and now we're gonna go over to our style sheet and actually to find out these two classes here. So we'll do I agree container. So I'm gonna do I'm gonna change it to comment because we never taken care of. We always just say yes and then we're going to do the response of my friend. But let's finish this one, filling this one first so that we can make it not getting out at us. So we want the position of the I frame to be relative because the actual video is going to be absolute um a position to be relative. Um We would like to turn off overflow so that the video and nothing goes outside of it. Um And then we want to define how big we want our actual video to be. So I'm going to say we want our wits to be 80%. Um Let's put that responsive, press in um this opposition. Absolutely because I don't think I'll be able to see anything until we but I do something You know it's of our video to be 100%. We need the height of the video Every 100%. Responsive. Responsive frame I bet that's exactly what's going on. Okay so um it's disappeared completely. Perfect. That's definitely not what we wanted. Um Let's get rid of this. Oh yeah let's say what's going on here. I find container. Mhm. All right frank potatoes there and I frame is there But if we did like 900 pixels for it with sure. Why is this in phys because we need a height. Uh huh. We shouldn't hold on let me finish building out. Well look at that. It's just really far down the page. Was it there the whole time? Sure I'm removing that petting. No so we really need that padding at work so mm yep we really need that padding. So the padding here. Yeah is adding I think a lot of the size so what's pop zero you can move it up 80% is way too big. 60%. Beauty. Much better. Um We're gonna do a left let's do it over. Turn that back on left of zero. Yeah the padding is a bit too big. Pulling the height for sure let's say 35%. Yeah this is better. Right were justified and now you can see when we do it it shrinks down. So the pattern is joining the height. I know it's a little bit weird. I would like to be able to explain a little bit better. I had to look quite detailed and to being able to um trying to figure how to make these responsibly this little while ago. So my brain's a bit rusty on why the padding is controlling the height perfectly. But basically the container doesn't of course the container doesn't exist in size otherwise. So the padding is just adding size. Um and then it's gonna be absolute so it's going to fill in over the padding. It's just simple principles. My brain is just showing dunks at the end of the week. Perfect. So now we have that we just need to build out the rest of this here. So what we have is going to be another arrow. Just because I was just like this particular gonna matter. Um we're gonna do a Mhm. Yeah we're gonna need this gift to be a position relatives that I can stick to relative And because we're justifying everything to the end that there is going to start at the start of here. So it's going to be layered on top of this. I'm 99% sure. Um let's confirm this by saying Hello on the screen. Probably going to be hidden behind. You're not safe. It's just not saving. Okay. Oh that's not supposed to be inside of the iphone container that's supposed to be. Mhm. I wonder if that's really weird. Yeah so it's going to basically sit right here so get rid of that. We're going to add in our image which is going to be our next arrow. So let's go figure out what arrow that is. It wasn't one or two. Hey look it's three. Perfect. So we'll do assets Arrow three we'll say um tutorial Arrow for this one. We're gonna give a class of position, position absolute and tutorial arrow. We are going to do another span and the span is going to contain this text here. We're going to also give this a class of big shock position absolute and tutorial text now we'll go like here and everything is going to be him because it's all going to be back here. So let's there are other ones here so I want to keep them all group together so we'll see tutorial arrow and we're going to need to move it over from the right now. Um so let's say right 20 pixels. Well I think that's about where we want it but it's waiting nick so let's change the height to be we're looking at here 136. That's pretty bad. Let's say 1 20 mm I feel like that's a little bit small so maybe actually let's no I didn't want to click on that. Hate when it does that Let's say 1:30 probably um Well it's a little bit better. We need our transform property in here. So let's throw our transform in there. Perfect. Um We're gonna need our tutorial text. Yes And our tutorial text is going to have a lot of the same things as these but we're gonna obviously be positioning the absolute parameters here. So let's keep our wits similar we'll say right we'll also do 20. Mhm and let's just get rid of this for now and see what we're working with. Perfect. So we want this to be lower. So let's say top it's actually the bottom, I'll do 40 up from the bottom. What if we did -40. That was negative 10. That looks pretty much well that's fine. It doesn't have to be exactly bang on but we'll do that. Um and then let's do for the text here at the bottom So this will do -40. Yeah. Yeah um I think I want this one not over so far. Let's do 10 negative 10 actually yeah that was much better. Okay perfect. Now we have another little squiggly arrow which is going to be actually the same as this one here. So let's scroll up to the top, see what arrow. This is a narrow era five. Uh go ahead and copy that. Where are we here? We're gonna do another one there. Um We're going to say to tutorial button. Arrow tutorial arrow go to victory arrows here. Oops. Got tutorial such is the arrow that's copies of parameters here and see what we're working with. Perfect. So we need our rotate is there? Oh I lost my bottom semi colon there awesome. And now we just need to adjust where it's sitting so we will do a right of let's say like negative 100. Yeah A Lot of Negative 100. You have 200 Too far let's say -150. Yeah And we'll be negative 50. I understand. Perfect. And now we've got in our button so oh you can do another give with the class of button and what we wanted to say for this one we would like to say check out all my tutorials. Check out all my tutorials excessively long phrasing. We could probably shorten that to be better. Um So that's getting a fair now which is obviously not where we want it so unsurprisingly we're going to do a position absolute. Um We're going to give it its unique class of tutorial buttons which we don't have yet. Um And we're gonna give it a text, no rap since it's long just so it doesn't uh scratch itself up. So let's do yeah my buttons up here. Yeah tutorial button let's do eight. Uh come uh How far down is this? It was a trivia. Bottott of 50. The bottom up 200, bottom negative 200 pixels actually pretty good and then we're going to do a right of Maybe for this 1 -1 70 eight of 200 pixels. We've got negative there. Uh Yeah. Yeah. Yeah. Yeah. Okay so Let's do one B Just a little bit probably like 180. Perfect. So that is that main section. They're just built out. Um We will deal with its responsiveness more later but for now it is the videos responding which is the main part we wanted to fix. So we'll deal with the rest of the absolute positioning responsiveness in a separate video. Um The last part of actually building it up before we get into that is just going to be doing this about in contact section. But we will do that in the next video.