how to create a responsive embed if I try to share I have the previous video that I built how I built my portfolio website and gatsby j / s if I.share this and I want to embed
this say on my website or if you want to embed this is because this video is
super awesomespared no expense in that advertising anyways in the bed I can
copy and paste this iframe but if I drop it in if
I copy this information starting at 0 1 sure and I'm using code pen if I drop it in now then she will show up maybe but the problem is when I resize my browser it doesn't resize the video it just kind of stays there so I want to create some sort of framework whereby when I resize my screen or plan a mobile device or an iPad that this video plays and scales and becomes responsive and I'll show you how to do that right now one quick thing before we get started inThis tutorial I'm working on a project and I love for your help YouTubeaudience
I have the little link down here on my website a designer who codes comm slash pounds sign YouTubers clicking on the youtube button I have a form and I'm looking in this form for you if you have any examples that you've done in your own work that you can showcase that I.can then showcase to the rest of theworldI'd love to showcase your design through code if you are up for submitting some information about what you've done and if it looks good I'm gonna go through a little vetting the process I love to send you a sticker and a thank-you note and a token of mythe appreciation so if you are one of those
people who also relate to the term the designer who codes and you have some example of work to share that you're okay with me sharing publicly head to mythe website which is a designer who codescalm and you can click on the button youtube and find the form there and again if I do select your work and I do put it up publicly I will send you a beautiful thank-you note and a sticker a design her codes and with that let's get back to this tutorial alright welcome back once again my name is Hayden Adams with InDesign her codes and this channel is all about helping you become a better web designer by learning how to code I've got tons of examples and information and even courses on
my website is a designer who codes so if you're curious about even more information about how you can become a better web designer by learning how to code check more of my content if you've loved this channel if you've watched a few donuts forget to subscribe and let's go forward so if I close my website down what I was talking about before was that I wanted to make this video that was embedded I.want to make it responsive and the problem is that by default YouTubedoesn't do that nowsidenote Vimeo you do rock for this the reason they're in bed you have to pay for the embeds on Vimeo but you can embed a responsive design and Vimeo but not in youtube I guess that's what you pay for what to YouTube world so we have to do a little trickery a little bit to just kind of trick it around a little bit and fix it up so
what I want to do is I want to actually add a container around this frame so I'm gonna call this container div class equals I'm gonna say video wrapper and then I'm gonna put something down here and I'll close the div come on if I can type properly there we go and then let's properly indent this I set everything indented I'm used to using visual studio code and area so often there we go that'll indent that piece of his iframe right here so what I want to do is I want to put a class called video wrapper what we have to do is we have to use the position: relative/absolute for this to move around because the frame fills up its own space
we have to create a relative positioning for this video to sit in and then what's gonna happen is the video wrapper is going to adjust in size thereby making the iframe video adjust in size so I'm gonna do it inside my CSS I'm gonna say video Wow typing this morning is quite a fun video wrapper and then we'll add the curly brackets and we're gonna say the position is relative if you're new to positioning the absolute is dangerous in the fact that, absolutely, it's not going to move, however, it becomes less dangerous when our parent or the video wrapper becomes relative and what happens is that the absolute becomes relative to the actual container thereby making it not so absolute per se so in the video wrapperI'm going to say position relative and
I'm gonna say padding-bottom now this one's important because what's going to happen is that by default this video rapper doesn't have anything in it even though there is an iframe by saying, relative there's nothing really contained in this space even though we see there is we have to push down the appropriate amount of padding to work thean appropriate ratio of size so if you think about it its width to height so if
I push down how far does it push across well thankfully some geniuses out there figured out that the padding-bottom for 16 dots sixteen by nine video excuse meis fifty 6.25% or if you want to put a comment in you can then say that let me put this one here command slash to add comments that equal sixteen by nine so if we scoot this guy over a little bit command right bracket and command left bracket tab things left or right and it's easy and hitting the tab key because yes that does work but I.dododon't hit the Delete key back I kind of just naturally hit the command right bracket command left bracket so padding-bottom equates to 56 points two-five which equals a sixteen by nine
the ratio which I'm assuming your videos are all are because that's the general size of YouTube and then a height I'm gonna say is zero so that's gonna hold our video wrapper but we then have to make the iframe do something as well we could add another Dib if you wanted to but I.always say less code the better and since we already have the iframe working within the video wrapper let's just say let me pull this a little bit lower for right now we're gonna bring you back don't you worry I'm gonna say video wrapper iframe and this is gonna affect all the iframes in the video wrapper and
I'll curly bracket this guy and this one becomes a position of absolute now it's absolute relative so the reason why we use the absolute positioning is the relative up top that's really important so here I'm going to say top: 0 left: 0 to make sure it sits in the top left and then we're gonna make the iframe equate to one hundred percent of the size of the video wrapper we're gonna say with 100percent and height 100 percent now againwhoa there it is that's better yes I did not make my div a particular size so we're gonna change that just so you can see it a reaction to this piece but note how that video that's a big video I.diddodon't really anticipate that part showing up but if I save this and let us change the view and let's see what happens so because this video fills thatThe entire size of this padding-bottom is the success to this whole piece so if I.change view I'm gonna say full-page view there's a massive video now watch watch
what happens sorry could Penn add you're going away that my video scales to the size of media now it scales to the width but the height becomes equated to that so even though our height is fifty-six point two-five the width controls the overall size but the padding of the height works with the ratio thereby my video sits in the perfect size and if I change the view and back to editor view and once again if I.were to just say for right now that the max-width was 200 mortgage as we can see it actually in action well you know I.cadodon't do the video wrapper have to go above the video wrapper so I'm sorry to let's create a parent div let's just sad class max width 200 normally do not advocate naming your divs by specific numbers but in demonstration purposes only
Ido forgives you so let's then nest the divs and then we'll push out that and there it goes that piece so yes if I.where to have a max with 200 the reason why I don't like naming things with fixed numbers is that let's say I.want to change the number and then all of a sudden, I'm like oh man how many times have I said max with 200 and all of my HTML CSS and anywhere else so I'd like to say just max-width or single call or something else that doesn't have a number but I just wanted to show it to you for demonstration purposes only soin the max-width 200.
I will say max width 200 and I would say max width 200 pixels and there it goes now it's nice and small I had to move not the video wrapper because if we think about it that video wrapper is relative that I'm not gonna touch the width or height it is just gonna move relative to the size into its parent and since that this is300 then the video becomes 300 pixels to the width which then the padding-bottom equals 50 6.25 if for example purposes and almost take this out if I said 100 percent that would be a square so if I. Had a square video then I could use the square design but some great genius figured out that 16 by 9 I imagine if you divide 9 by 16 you get 50 6.25% so all you have to do is do a ratio and
That's how you get the percent of padding-bottom and using the video the wrapper I frame your video now becomes scalable on anything you do and this will work in HTML CSS and all the other frameworks if you are working in Gatsbythen, of course, you're just going to change the class to the class name and you're all set and I believe you at speed does require a title but this is how you can create a responsive video inside of your website, I'm passionate about teaching designers.
how to become a better web designer by learning how to code and my first two courses are up on my website at courses dot a designer who codes these two are all about Gatsby if you're brand new you've watched these Gatsby websites for sure cuz thinking I want to learn how to use gaps feet while this course is for you how to set up build and deploy yourThe first gap the website will take you from start to finish on building your first website if you want to take it one step further than how to build a blog in the gap to Jesco so that not just the beginner but more the intermediate usages ofGatsby so if you are looking to better I encourage you to take your web skills away those courses to sign up and become aa better web designer by learning how to code in these first two courses about