0:00:00
What’s up everybody welcome back it is two thousand and twenty two happy new year this is the very first tutorial of 2022 I’m gonna be teaching you how to create a little video card that opens a video in a modal or a lightbox This allows you to display videos on a website where you don’t actually have to embed the video and have the ugly YouTube player with whatever random kind of a screenshot They used as the thumbnail you get to create your own video cover image your own video play button You can even make the video play button pulsate like I’m gonna show you in just a second And then when they click on the play button a lightbox or a modal window comes up and that’s where the video gets to play This is really good for a lot of different reasons It’s not a super advanced tutorial so even beginners are gonna be able to follow along here But what I decided to do is to sprinkle a ton of golden nuggets and more advanced stuff into this tutorial So that everybody gets a lot of stuff out of it This is gonna be one of those tutorials where you just walk away with like two three four new skills that you did not have before so definitely watch all the way to the end Now before we dive in I want to take a minute to just talk about who this channel is for since it’s a new year We’re gonna be getting a lot of new people This channel is for two really two sets of people one is WordPress developers who use like oxygen and bricks Now haven’t done any bricks tutorials yet, but maybe that’s a little hint of what’s to come But if you use oxygen if you use WordPress and you develop websites This is absolutely the channel for you. You’re gonna get to learn a lot of really cool stuff And then if you are a freelancer or you are an agency and you are interested in growing your business Raising your prices becoming more profitable streamlining throwing things creating systems hiring new team members and buying your time back and living a just a better life in general and building wealth From this kind of agency digital business lifestyle This is also the channel for you So if you are in either of those two groups the first thing you need to do before we go any further hit the subscribe button Hit the thumbs up hit the little notification bell hit choose all get all notifications You got to be all in all in on this channel, okay?
0:02:15
And then drop a comment below and yeah, just say hi or whatever all right So let me show you what we are going to build This is oh I almost forgot So on Monday the Georgia Bulldogs for the first time since 1980 One the national championship college football national championship beat the Alabama Crimson tide who they had lost to Seven times in a row that is absolutely painful to say, but it was fantastic So what I decided to do is let’s just take a moment. I thought it would be a great idea if we use that as the theme for our little Project here and for the Alabama fans specifically I thought it would just be amazing if we made the video that pops up Be the interception that won the game for Georgia. I think we would all be happy about that right? Sorry, I’m I have to I have to poke my fun all right, but anyway look This is what we’re gonna build so and I’m gonna show you all the styling stuff right? So if you don’t know how to make things overlap with CSS grid. Yes, I’m gonna show you how this overlapping action happened with grid and grid if you don’t know is really really powerful for making content overlap Really really easy to make content overlap once you understand kind of the structure and what’s going on?
0:03:33
Maybe you don’t know how to put a little red strip inside of a box. Maybe you don’t know how to make this little Three-part little box thing that’s going on here Maybe you don’t know how to make a pulsing play icon. Maybe when they hit play. Oh gosh. What’s this? Brace Jones career You need ten like I could pull I Get launching Underroad and intercepted really ring All the way to the end zone Georgia is gonna The Crimson tide I start tearing up. Let’s go. Let’s let’s move on So all of this stuff is what we’re gonna build okay? So what we’re gonna do I’m gonna start with a blank slate. I’m gonna I’m gonna walk you through all of this We’re gonna make it as easy as Absolutely possible so that you guys can build you know super useful stuff like this All right, so I’m gonna add a section and I’m gonna add a background image. I already have the image on my computer All right, we are going to go left 50% and top 50% just to make sure that we can see the exact center of that image And then what I’m gonna do is I need to make this whole section bigger if you see here it takes up the entire screen So Normally what you would want to do but you can’t do this in oxygen which is a bug So Elijah if you’re watching I need you to fix this ASAP now I fixed it with automatic dot CSS So if you have automatic dot CSS I’m gonna show you in just a second how this is fixed But what you would want to do is go to minimum height and set to a hundred VH and it appears that it works The problem is it doesn’t if you see this little purple boundary right here This is the boundary of the inner content div that is inside of sections by default in oxygen And if I add something like a button you see the button up there if this was truly done properly I would be able to go to layout flax column and set the justification of content to center and that button Should go down here somewhere But it doesn’t because the section got taller but the intersect the inner content div did not get bigger with it So my content is still trapped up here and there’s no way to move that content down into the center That is absolutely a bug. So what we want to do Here’s another bug if you take off flex it’s staying flex You actually have to hit the reset button here and this is the latest version of oxygen So there’s two little bugs right there that I’ve noticed and that’s it’s not the beta by the way. It’s the latest Full public release of oxygen So in automatic that CSS we created this class which is height full and Notice that that fixes our inner content div and that happens whether I’ve already done The height on here or not so if I go to size and spacing take off that 100 VH height So we’re kind of back to where we started. I just want to make sure I didn’t change anything else I thought I clicked a button on accident a second ago. Yeah, I did layout block like okay random All right, so I’m just gonna reset size and spacing All right, and then we’re just gonna do height full and Everything works just right off the bat because automatic CSS is cool Okay, next we’re going to I can now go back to the div now You can do a lot of this stuff in automatic CSS But I just want to use vanilla oxygen as much as possible We’re gonna go lay out flex column and justify center and now you see we can get things to where we want them to be in the center Now I don’t want a button to be there, but I was just showing you Okay, what’s next we need to darken the background obviously now if you notice it’s much darker around the outside and much lighter on the inside So it has sort of a glow that kind of closes your eye into the actual content in the center So the way that we’re gonna do that is with a background gradient and I’m just going to grab we’ll just do black here and Black here and then I want to take this one or just probably this one the top one and Bring it down to like 80% or 75 Let’s do let’s try 75 first and then I’ll choose radial and it’s gonna put that right in the center for us So the the outsides are darkened the inside is still darkened, but not quite as much We have that background kind of peeking through. I’m gonna hit save and then what I’m gonna do is add a div So what we need is our container for all of this content right here and that container is actually gonna be a grid And that grid is what is going to create this overlap effect here So I’m going to choose grid from the oxygen builder I’m gonna choose eight columns now this is gonna make more sense in just a minute and Right off the bat you see yet another thing that I don’t think oxygen considers this to be a bug But I consider it to be a bug my grid goes completely off the screen and breaks my layout and the reason is This minimum width of each cell because I chose eight and it by default for no reason It doesn’t need to do this. So that’s a minimum width of 200 pixels That’s a 1600 pixel grid and you can see it flies off the screen this minimum width should be zero and then we should get something like this And then what I can do is come down here and I can set my width to 100% and now it just takes up the whole Intercontent right but what I also want to do is go to max width on this and set it to something like 90 or even 100 which is a thousand pixels 90 a hundred rim is a thousand pixels in my system And then I want to margin left auto margin right auto because that will center that div back into the horizontal center of this section All right, so now what I’m gonna do is Is we’re gonna talk about grid and making some items overlap so the first thing I need is two cells These are the cells that are gonna hold my content now you see they’re very very small They look much smaller than what’s going on here So the reason we did eight columns is because it gives us more control over the overlapping and how much these columns span and all of that Now I will say this you if you watch my other video on CSS grid in oxygen You remember that you can grab a child div and you can change its span to make it bigger and you might think that That’s what we’re supposed to do with overlaps but overlaps will not work when you do it that way Because they need a little bit extra that’s not baked into oxygen So we’re going to have to go into the div and into custom CSS But we’re not gonna have to write a lot of CSS, okay?
0:10:16
I’m gonna walk you through this so I’m gonna do and you don’t put a period because we’re not making classes So I do grid grid column, okay? So grid column and then I’m gonna do one over a number and the number that I’m using here is where I want the span of this Cell or this column to end Remember I have eight columns to work with so I’m gonna choose five and you can see immediately that it jumps to being Five columns now what I’m gonna do is go to my other grid now if this one ended on five and I do want to do I’ll just a little inside Tutorial here on CSS grid excuse me If you put it at five it’s actually four columns because you’re telling it to span through four All the way to five so if you go all the way to five where five starts you’ve spanned four columns does that make sense? So if I stop at five if I start the other one at four they should overlap right because there’s a one column gap in there or a one column of Well overlap so I’m gonna go to call a custom CSS here and do grid column and then we’re gonna start at four And we’re gonna go to negative one Negative one is the end. It’s however many are left take up all of those So if I end up changing the column count on the grid none of this will break all right unless I go under four columns so Grid four starting at four going all the way to the end Creates an overlap but as you see they’re clearly not overlapping because what did I say a minute ago?
0:11:52
I said CSS grid tries its best to not overlap so we’re gonna choose this first div here And we’re gonna do the same thing to both of them and that’s this we’re gonna go grid row start One so I’m telling it to start this on the first row I’m gonna now copy this and I’m gonna go to this cell and I’m gonna tell it to start on the first row if they both Have to start on the first row and they’re like they are now With their overlap they’ll actually overlap so I’m gonna go to Custom CSS and paste now you might think Kevin Why didn’t you just do that with the second one the first one was already on row one and it’s the first one by default Won’t it use be on row one? Unfortunately not because like I said grid really tries its best to not overlap content This is the first div if I take off this grid row start it pops it to the second column even though or the second row Even though it’s first in order okay, so you have to have grid row start on both of them at the same time and Now you see that we have our overlap all right So what I’m gonna do here is add our backgrounds and what you would want to do Obviously is use classes for all of these things Either utility classes or even custom classes. I’m doing this all at the ID level But you would definitely want to use custom classes if you planned on reusing this element ever again In fact You know what we should do this the right way. I’ve always said that about my tutorials is we should just do them the right way So I’m just gonna clear out those last two things I did and And actually will clear out the grid as well stay with me because it’s gonna take five seconds to build this back So what we’re gonna do is called featured video Featured video section okay, so featured video section and then I’m gonna go Featured video section double underscore because we use BIM and we’ll do content wrapper and then featured video Section double underscore image. No, this is the video wrapper Perfect and then we’re gonna make this a grid a columns zero on the minimum width Drop down to a hundred percent on the width. We’re gonna zoom back out here for a second make this a lot easier and Then we’re gonna grab this one which the featured video content We’re gonna go to custom CSS grid column and we’re gonna do one over five and we’re gonna do Grid row start one Copy those come over here go to custom CSS This is gonna start it for it’s gonna go to negative one and we’re back to where we were and now I have custom classes that I can style So I’m just gonna do white on this and On this we’re gonna also do white but it doesn’t really matter because I’m actually not gonna put any spacing in there Let’s just put our image. Let’s put an image in there So I’m gonna browse for our image. It’s gonna be this one the same image. We use this the background actually and Then what I want you to see on this is this white box Needs to get into the center of this design So the way that we do that is with this vertical item alignment down to the center and we need to make sure it’s a good idea even though this comes first It’s a good idea to lay out and Z index one this to make sure it stays on top at all times and And then we can start loading stuff into it like a little heading and some text So we’re gonna do a heading which is gonna be an h3 we’re gonna do text Right there and then this box. I actually am going to use padding and because we have access to it I’m just gonna use Automax CSS. We’re gonna use a little variable from automatic dot CSS I’m gonna grab this content which I can’t seem to do okay, so keely Ringo picks off Alabama’s Bryce young for the Game winning interception, okay, that doesn’t need to be capitalized. All right 2022 national Championship winning Play bam, okay, and then I’m gonna make margin top on this be well actually if we wanted to do this properly So we would do featured video section heading featured video section text and Then on the top of that text we would do margin var space S, okay, something like that. All right great now. We’ve got if we just save and look at this We’re making really good progress, right? So we’ve got our overlapping card This card seems to be a little bit bigger. So one thing we can do is on the top and the bottom I don’t know why I just did that We’ll do Excel on the top and Excel on the bottom and hit say well, it’s too Excel all around I guess set that to none so don’t break all right. We’ll do Excel all around and save and Now see there we go that looks pretty good All right, and then what we can do what’s cool about this because it’s not a video embed You can very easily let’s do featured video section double underscore video Actually, this is not a video. Sorry. Let’s let’s leave that for later featured video section cover image and We can change the height here. So you can choose like whatever you want. Let’s do four 40 rim So it’s 400 pixels and then whenever you change the height of an image like this What I would like you to do or you should really do this if you just want it to look good Object fit cover. Let me zoom in on that. See all can see object fit cover makes that behave like a background image So it won’t stretch or warp the image All right, that’s very standard stuff. I do that all the time Let’s hit save and see how we’re looking Perfect now notice that I put this image inside of a div which we call the video section video wrapper So that section I’m going to set as Layout Relative because I’m getting ready to do some absolute positioning. We need to get our play icon into this little Container here that we’ve built so by putting this to position relative It’ll contain my icon which is going to be position absolute So I’m going to add my image browse choose my icon Which is this now this one?
0:18:35
select image and now we need to do featured video section play icon and then I’m going to make the width Let’s say six maybe six maybe eight Let’s do eight then I’m going to lay out and I’m going to do absolute and then this is a little tricky This is a little tricky. So pay close attention here. You would think that going left 50% and top 50% Would do the trick. It actually doesn’t it’s it’s off now There’s a lot of ways to position absolutely position elements Centered like to center them, but this is the technique that I use more often than not Because it’s the first one I learn and it’s just stuck with me. So once you do left 50% top 50% You’re going to go to effects and you’re going to go to transform add transform and you’re going to translate it And if you translate it on x and y 50-50% Back to where it was it’ll actually go into the center, okay? So that gives us our play icon now We’re going to go into here and go to custom CSS because remember this needs to be clickable But we’re not going to make it a link. It doesn’t have to be a link to open a modal window So all we have to do is say cursor. Let me zoom in again Curse your pointer and that’s going to give us a little hand icon when people hover over It doesn’t even have to be on the hover. It’s just you just make it cursor pointer and it works So let’s go to reload here So there’s our see the hand so we have our play icon. We have our cover image. We’re getting there We’re getting really close, but I got to do some more things We got to make it pulse. We got to have black and red because that’s the color scheme So the first thing I’m going to do actually is Probably what we need to do I need to grab that image and wrap it with a div and I’ll maybe explain why I’m doing this later. I just know I need to do it because of how the pulsating works When we get there, I’ll explain it to you. So on that div what we can call this is featured video section This is icon a play icon wrapper and then I’m going to go to backgrounds black and 123 I don’t know why it’s not turning black. Okay. Oh You know what I got it. Okay, so we actually don’t want this to be absolute and We want this to be absolute so layout absolute This is going to go top 50% right left 50% this is also going to get transformed effects transform translate and Minus 50 and Minus 50 and then we just have to get that image back in there. So if we go to layout. Let’s just clear all the layout action there Okay, and What do I do here cursor pointer?
0:21:33
Oh Effects transform there we go got to get rid of the translate on that Okay, sorry, so now now we’re aware we needed to be so this div is just a square which is not good So we need to go to borders and go to radius of 50% Now the black is back there and let me see if the black actually sticks out it does So what that tells me is we need a little padding if you put padding inside it’s going to make the icon shrink a little bit And you’ll see the black around the edge. So we’re just going to do like M’s like 0.5 ends of padding and there you go So now we have that now that icon is looking a little bit big and just for This sake I’m going to make the z index of two to make sure it’s always on top and I’m just going to say that this icon should probably be more like six rim. Okay That’s much better now what we have to do is create the red around it You could use Border on that that might be the easiest way to do that So I’m going to take the div and we’re going to do border and we’re going to do solid five pixels and The color is going to be do I not have the Georgia red color in there? All right Let’s go to color picker. Let’s grab this red right here and Let’s pop it in Okay, so now I have my red around the icon. Let’s go ahead and refresh Bam look at that now. It’s not pulsating which is a kind of a problem, right?
0:23:05
So we’re going to go to a site called animista and This is just a lot of free really cool little animations that are very easy to pop in So what I’m going to do is go to attention and I’m going to go to pulsate and there is that pulsating kind of action that I want I’m going to click the code box over here. I’m going to copy all of the keyframes You don’t really need to know how to do any of this stuff. It’s literally this copy paste so I go to Style sheets out of style sheet. This is going to be called animations And then I’m going to paste those keyframes in there and you’re going to see it says animation heartbeat right there Then I’m going to go back to animista and you see I can see the heartbeat Code right here. I don’t need all of it. I just need what’s in there, but unfortunately it’s making me select all of it I’m going to go to my icon now Okay, notice in the oxygen builder sometimes that goes away when you have absolutely position things over other things and a lot of Go a lot going on But if you can’t find it you can always find it in your structure panel I’m going to go to on my class to custom CSS Paste it but I remove the heartbeat And then you can just select all of this shift tab will back that stuff up to be in alignment and then I’m going to hit save And then I’m going to go in and boom and now I have a pulsating little play icon Which is really really cool now you can make the play icon pulsate or you can make the entire div pulsate I did it one way in this one and I did it a different way in this one But it’s literally just what you paste that that code on okay, so now we have a pulsating play icon It’s in the middle of our custom cover image that is Clickable, but obviously doesn’t do anything because we haven’t created a modal yet and we haven’t embedded our video That’s all coming next one thing we need to do is this little box action right here So I’m going to select our image or you could do The div the wrapper let’s do the wrapper. I think that’s probably the best way to do it So on my class here I’m going to go to now Normally I did this with box shadow, but the problem is with box shadow in I’ll show you you can only do one you can only do one box shadow I need two box shadows and so that means oxygen’s not going to get the job done for me So what I’m going to do is zoom in so y’all can see and we’re going to do box shadow and then I’m going to do One rim Let’s start there one rim. This is the x and y offset then I’m going to do zero blur and and Zero whatever the other thing is called and then I’m going to make that black and if we save and go look at the front end You see that we have a black outline kind of hard to see What I’m also going to do now is take that sim many call in a way and replace it with a comma And this is how you do multi-layered box shadows So now I’m going to do two rim and two rim which is one rim greater than the other box shadow that we had zero zero and then I need my little color here which I Wish was saved in oxygen, but it’s not Bam way actually hold on doing this wrong. It is it’s a white box right?
0:26:18
It’s white and then red not black and then red so we’re going to do white and then red So I just changed the color of that first box shadow Here’s the second one is red hit save look how easy this is guys Right super super super easy. So I’ve got that next thing we need to do is that little red box inside of here That’s actually a little bit tougher So what we’re going to do there is use an absolutely positioned blank box with a border on it And I’m going to show you how to how to do that so here’s my class right here and And we’re going to use a pseudo element for this so knowing that I’m going to absolutely position something the first thing I always do is go to the parent layout relative because I want it contained inside of that parent element So now I’m going to go to before you could really use before or after let’s try let’s do after just to kind of show you You can do either one and I’m going to go to border and we’re going to make this one pixel solid and then my little red color here Just like that and you’re not going to see anything because there’s nothing there yet Well, actually you do you see a little dot look at that as a little tiny dot of where this is going to be I’m going to go to layout and absolute and then you’re going to see that dot move it just move to right there and then This top left right bottom positioning is all that we need to make the magic happen if you do zero It will take up the and it’ll and you do zero on all sides. It’ll grow to be the exact size of its parent container watch And it looks like we have a red border if I wanted to be on the inside I just offset it so if I offset it by like one rim on every side It will come into the middle or into inside the box by one rim And then I had saved and I’m done So I have a nice little red box accent inside of my other box So let’s take a look at what we got going on Things are looking pretty good All right There’s a little bit of a difference in how the overlap is happening and that might be with the spans that I chose So if I go back here, let’s do like one to four Definitely doesn’t seem like that’s it. Let’s go to this and We’re going to div Custom CSS Maybe I started three that definitely got wider Maybe it’s my overall grid so instead of eight I do ten Let’s see if that works And then this image I needed to be a hundred percent it needs to always go all the way to the edge And because it’s object fit covers it’s never going to warp now that’s actually Kind of a whole different look But are actually kind of a pretty nice look right This goes to show you what I’m showing you here kind of by tweaking and adjusting this is because I’m using grid for the overlap What you notice I’m not having to do is a whole bunch of negative margins and all this other nonsense I can literally just change how they’re spanning So like this could go to six if I wanted it to it can come down to four I’m going to leave it at five and then this one can do its own thing remember It’s automatically going all the way to the end regardless of where I started So really all I have to do is change where that starts so I’m going to hit save on there and Then we’re going to refresh okay So there’s a little bit of difference between the two, but it’s okay It’s still the effect that we wanted to have happen what we need to do now is get the modal going and we need to get this to pop up So I’m going to go here and I’m just going to hit add modal It’s going to add it way down here First thing I always do with these models because with 70% is actually that’s not a good default in my opinion I’m going to make it 90% and then I’m also going to change the max width to 100 So it’s a nice big video, but it’s not too big right Let’s do maybe Hmm Maybe 110 we’ll do 110 and then I’m going to insert a video now because I didn’t put any padding or anything like that in there It’s it’s naturally you’re not going to see the edges of the modal So I am going to go grab my video here share copy I’m going to add that as our video URL that’s perfect and then what I’m going to do is grab the whole Modal by clicking into the gray area here Set the trigger to user clicks element and then this is just going to be play video right there and I go up here. I grab my icon really my whole wrapper probably is best which is that right there and I do play video and I add that class and now that that class is attached to here the modal is looking for that class all good Let’s see if it works So I’m going to click bam. We have our light box open up now one other thing I’m going to do is I want people to be I want there to be a closed button, okay? So inside of the modal I have my video I am going to add an icon All right perfect actually should probably put because I don’t know how the modal is going to behave here So I’m going to put a div and That div is going to be a hundred percent and a hundred percent and Then I’m going to slide my video into it and Then I’m going to slide well here we go with oxygen you can’t can’t really drag and drop All right now that they’re in a div I can make this div Layout relative and then that means my icon can be absolutely positioned right without going crazy off the screen So I can hit absolute and there it is now I want the Z index on that to be two I want the actual icon to be a across or a close sign where’s the close sign that X right there, okay?
0:32:27
And then I want it to be white All right, and then I’m going to go to layout I’m going to go to the right Zero and the top is zero that’s going to put it right up in the corner there and Why don’t I do REM here? And then what I kind of want to do is just offset it right so if I go minus Let’s do like minus five Seven oh, you know what’s going on. Okay hang on layout Overflow Visible all right. I’m losing it. It’s something with the default of how these modals are Layout visible there we go So the layout on the modal is hidden by default. We just make it visible and now we can see the icon It’s a little big though. I’m going to go like 32 and Once it’s smaller I need to move it a little bit more so instead of minus seven We can probably get away with minus four actually. Let’s try to put it right on the corner. How about that?
0:33:31
So let’s do minus two and then let’s do REM Minus two as well. Oh, it’s so close one point five Minus one point five there it is like right on the corner of the video All right now we need to give that a cursor Pointer right So that’s going to give us a little hand icon when you hover over it And then I think it’s oxy closed modal is the class by default that closes the modal window So let’s take a look at how we’ve Got that now. So if I click this I should get a close nice Perfect, okay, so guys this is pretty much the end of the tutorial We’ve done all of the overlapping we’ve done all of the styling we’ve got a pulsating icon we click it all That’s left guys all that especially if you’re an Alabama fan and you made it all the way to the end of this tutorial The only thing that’s left is that we watch the video Bryce Jones career You need ten late-clock and four From the pocket launching Under We can we can close that thank you guys for let me go back to camera here Thank you guys for watching I’m super excited about 2022 a lot of amazing amazing stuff coming your way if you have any questions drop them below If you like this tutorial hit the thumbs up if you’re an Alabama fan Hit the thumbs up man. Don’t be salty. Don’t hit the thumbs down on me, okay?
0:35:24
Um, drop a comment below. Let me know just say hi whatever support the channel. I love you guys. I’ll be back very soon. Peace
