Lessons

Lesson Info

Responsive Video Embedder & Slideshows

If we decided to host our own video if we didn't want to go with a service like a youtube or a video or something to that effect and we wanted to go in and just maybe host our own what we could do a couple different things here, I'm gonna go back to the admin and by the way, you're going to see that with this embed video right here you're noticing that the short code in the editor here it's not actually previewing the video like you did when you first embedded with wordpress when you did that by just pasting it and that's one of those things you just gotta get used to so that's even the visual portion if we decide we want to host our own video, alright? And I've got videos all over the place to get in before zach got this kind of thing, etcetera, we're probably gonna want to use some kind of html five player, a player that will support our video and be able to feed it the correct file formats to crack video formats that's going to be one of the big things we deal with. So if I come ove...

r here to my plug ins and take a look, you'll see that we have this video on better and you're going to see that it says from many providers okay, I'm gonna come up to add new and one of the things you're going to want to take a look at it is you want to take a look at what's called video js and I always test to make sure it's here video dot js is a html five video player, which is set up to have fall backs instead of basically work that's the idea just tow work okay, you can do it yourself if you want to, you can actually go out and grab this javascript code and kind of do it all right, but there is a plug in I'm just trying to say that's there if we go out, you're going to see there's one hundred sixty thousand downloads, which means people are using this thing, but the issue with this one could be it hasn't been updated in eight months, so we've gotto possibly be careful with that. I'm gonna click out more details here and take a look and this is always something to pay attention to obviously warning may not work, it is compatible up to three, nine, two you guys, this is actually a good learning thing here, but if you look at a plug in and you you think yourself, I need that plug in, I have to use it because I don't know how to do that I don't want to do that there's a couple things you could do here if I go and look over here at the combative, compatible, up to, and maybe it's not compatible than my version, if I scroll down a little bit, you'll see, okay, here's, all the ratings that's great, but I would suggest you do is go click on the wordpress dot org's plugging page. If I click on that and take a look, you're going to be taken to pretty much the same information, but the reason why I'm taking you here and showing you this is because if you look here, this is pretty cool you're going to see right down here. What's called compatibility sometimes the plugin editor of the author rather doesn't update in time or doesn't do it in a timely fashion doesn't do it a lot. So what we do is we just hope it works. Write so you you install it, you activate it, see if it breaks if works, etcetera, you can also come right here and you'll see that even though it's not been updated, people will go up here and say that for this version of wordpress, whatever it happens to be, and they always have the latest up there it is working or it's not, and in this case, nobody's reported on it yet. I actually like to be a good citizen in that case in that case and I'll go in and try it out and see if it works and then you report back and you got a log in to do that but that's something you can look at too that's a good thing to see all right, so what I'm gonna do is I'm gonna install it just kind of take a quick look at it just to show you this I'll install now back in the admin and it'll take a few seconds here it's unpacking it doing its thing and what I'll do is I will activate this and there we go it is activated, I'll go and school down and take a look at it and you'll see video js there we go all right, now I'm gonna go in and take a look and see where it is located, you can see that it's under settings over here on the right video jazz settings there we go click on that and now you're going to see that it's going to go in and do a lot of different things you can if you want to with this you're going, you're gonna be using different video file formats you can if you look right here, you can use the insert h male five video button it's actually got one now and I'll show you guys that or actually use a video js short code. You always gotta look for this stuff on how to implement these different types of plug ins. This is key, and you'll see html, mp for videos. A lot of times you going to see this? Also works with youtube? It's got a lot of things you can do, controls, ideas, et cetera, but let me go off the page. I want to show you this. I'm gonna go over to one of the pages, and I could say autoplay, and this is actually pretty cool. Look at this. I'm surprised it's not on by default, but this plug in will do response. A video like the other one did, but it's not on by default, so make sure you turn that on and make sure it works. Make sure it looks good with what you're doing. I'll save it now. One of things, too, that I think is really great with a lot of these plug ins. If you look right here at use cd and hosted version lot of plug ins, you're going to see things like that, especially with with hosted fonts with video players, things like that, a seedy end is a content delivery network, and essentially what that means, I want to just kind of draw this out just because it's kind of important and it's something that as you get further into wordpress you're probably gonna become more aware of and start to use that that's the key so if we have let's suppose that I am hosting this on, you know go daddy or whatever okay, this is ah bloo host okay, so this is my host right here I've got all my files right there got everything going on this plug in is actually using javascript files it's using content that it needs like you know, simple jobs good files that we could either have by default live on our host so on our host in our folder there will actually be the job's good file or files it needs to get this thing to work now that's great. Ok, because it's all there and if somebody looks at the video the video you know it's gonna grab the files necessary java script etcetera and get it to run. Okay, but it's going to download that which is fine could be totally cool. Now, if that javascript file updates and you guys the cd and hosted means that it's probably something that a lot of people use if you ever see something like that okay it's usually like jake weary or a video player like video js etcetera excuse me if you see that essentially what's gonna happen here is if we turn it on okay we're saying you know what? I don't want you to grab the java script file that this plug and installed okay and I want you to grab the one that's on her server when I want you to do is I want you to go over to the server for whatever is hosting this thing or whatever created this thing this could be google like google for jake weary ok, this could be a video died js sight this could also be some other cdn semantic content delivery network okay on that server there's also the same job askar files or whatever files it needs. So if we say use the hosted version of cdn version were saying when somebody in their browser so they're in their browser right here and the type of the girl and they see the video right there the browser is actually once it gets all the files it needs from our sight instead of grabbing this javascript it's going to go over to that cd and to the actual host or server whatever it is grab the job's good from there and pull it over and use that for the site okay what's great about that well there's a couple things if they decide to update the corps files thes java script files for maybe video jazz this player it's already updated you don't have to do anything you know if the update the plug in you never do anything like that the files are already there and ready to go because it's always pointing to the latest version on their server on their host the other thing that could be great is that supposed it for instance were doing this video player and we got this thing and we're telling it to go over to this server and grab it on the cd n this is the city end and let's suppose somebody else goes to look at another site that has the same plug in in the same job seeker files and they're using the same stuff so if somebody else goes on their machine and this is their browser they type of girl it's completely different page it opens up a video but that video is using the same plug in in the same files instead of going to their server it's doing the same thing it's going to the same cdn the same host of same server why do we care about that when I first saw that I was like I really don't care where it comes from just make it work but if we have it on the cd in here if we have hosted here and it's being used on different site these files that are getting pulled down are actually gonna be cashed so that's pretty amazing so if if you have this file pulled down let's suppose I'm the same this is the same machine and I'm looking at the browser but I'm looking at to different sites for instance and the two different sites use that same file it downloads for the first one I look at its cashed in my browser then it just uses the cash version on my next site on the site that uses that same job askar file that's pretty cool so you need to consider whether you want to use the cd and that was a very long winded why do we use this one check box I know but for plug ins it's really important understand cdn okay all right, let me let me back out here we do have some things that we can add it as faras the colors you're going to see right here is going to tell us that we can use the video short code do you want to do that? You could if you want to and that's the default like I said um let me go and say the changes here hurry up and let me go to a page now so I'm ready to start this I've got you know the play and set up I'm gonna go to one of my pages one of my posts, whatever I'm doing here and I'm gonna go to the about us page for instance and you'll see that we have the and bed video button right here we can now use. Like I said, we can use the video tag that we have so we could actually go in and just type in video if we want teo and using mp for, for instance, so I could come in here, do something like this and say, video and once I go in and say let's, either update or switch views, let me update real quick switch views to the text to code, you'll see that I've got the player here, but look at this thing. It actually looks quite a bit different than it did before the default video player we saw before was basically just a box with this, plug it install it's going to try and use that video player so that it plays across different browsers and is going to be responsive. So if I click on edit right here, you're going to see that we can go in and do things like replaced the video if we want to, we have the ability to upload files and work on that. We have the details we can look at if there's anything already there, we can set a poster if we want to, and we could add subtitles using a video that we have already okay, so that this is this is another yet another plug, and I just wanted to point out for a video, maybe that you upload to be able to work with it also is going to work with, like I said, you tube a couple of different things that you can see you're going to see right here that there is another way to do this, too. Let me let me add, and I'm not trying to show you fifty ways to confuse and amaze you. I'm just trying to show you that a lot of these plug ins will throw different things that you hear, you're going to be right here. There is a button now in the added there called insert html five video, so if I click on that one right there, you're going to see it's going to say, all right, let's, let's do this thing now, okay, this is ah, perhaps why people are maybe not using it as much, but you can see that right now. It's actually blank box a lot of times that tells me that if I can't see anything happening, are working plug and may not be working with my version, okay, and I'm not saying that's the case in here, but it may not be working with me. My version, so if if that does happen, we're either going to try and find another plugging we're gonna go back to the actual plug in directions and see what they say about adding short codes like the video shortcut I showed you there's always ways around different things to work on. And for instance, this bid button just for me doesn't appear to be doing anything right now, so all right, let me go and delete that and save the pager update the page so working with video that was kind of ah, very long winded take you through howto work with video on how all this works because there's a lot to think about the really is, as far as you know, getting it right, making responsive and actually making it show up on all the different devices and all the different operative systems. So okay, let's, do this. We've got video kind of kind of concord here, what I'd like to do is I'd like to talk about creating a responsive slide show these air huge everybody wants to do something like this, and a slide show can be a simple as you want or as complex as you want, and it could show up in a lot of different places, a lot of people have slide shows. Maybe in the header area so that you're showing off your photographer you're showing photographs if you're trying to sell product you're showing product you're showing, you know, different tag lines and different things like that so there's a lot of ways to get that done I tend to use aa lot of things that are not necessarily plug ins, so I tend to use this one right here is actually one of my favorites because it's it's dead simple okay, this is responsive slides that js and this is once again one of those lengths that you will have on the pdf of links and responsive slides died just like I said, this is the thing about a slide show a slide show can do a lot. A slide show can show images aside cytokine show content critical video can show captions a lot of stuff, but you have to pick the right slide show to work with because if you pick the wrong one and suddenly realize, well, I need a caption that slide show doesn't do captions and you went through all the pain to get it in there you got to do the homework first you gotta look at it so what I tend to do is when I look at something, I go through all of it, okay? I'm like okay features fully responsive works in all browsers, captions separate pagination different things like that some of these only work with images you can on lee really use images. All right, so you'll also see here it says okay, usage here's what we need to do, we need to do things like link the files it's got, you know, java script, etcetera. We're going to add some html mark up. We're going to add css and all of this is going to go somewhere indoor theme, right? Obviously. Like I said, you could attack it this way you can grab yourself some kind of, you know ah, slider like this. Grab all the files, download what you need and start to piece it in your theme if you want to do it that way, for those of us that develop themes, this is typically how we do it. We will actually take the time to put the java script, link it, put it all within the theme itself and make it just work out of the box, if you will. If you're doing this yourself building for client, et cetera, the things you have to ask yourself are you do I want the client, for instance, to be able to edit the images in the slide show? Do I want to make it easy for them? Do I want them to create other slide shows? Okay, do I wantto hard coded into the theme to want to make it so that it just shows up? And I don't really have a choice of where it goes unless I go into the code or into the function files or the theme files and make those edits? So these are things you need to consider, okay, whether you're developing themes or just maybe trying to edit a theme that you have you bought or you have I just really quick another couple slide shows that we use or that we use I use rather woo themes is the big one we're themes is huge. This is called flex slider once again, very cool, very simple it's got a lot of things going on if you want. Teo the one thing you really need to if you're looking at a slider, I already kind of mentioned some things to look out for us faras, you know, does it contain what you want? You want to make sure that it has swiped support? This is something that's key if you're dealing with a slide show and maybe you don't want to show up, you know you don't want it to show up a mobile, okay, that could be a key thing, because if you have this thing with enormous images and you decide on desktop, it looks awesome, but I'm mobile maybe we don't need that content. Some of these will actually have the ability to turn it off for mobile, and they'll have that on the options touch swipe supporters wife support is really important because you want to make it to where, if it's on a mobile device, you want to make it so people can do this, otherwise, if you don't have that support, people are going to have to tap and click on the arrows or whatever navigation is available in a slide show. So that's pretty key a lot of a lot of psychos are going to do that they're going to be one of one of two or three things by default, they're gonna be responsive, okay? Uh, they're goingto have touch support or swipe support ongoing editable. So this is a lot of things that we we just double check for, okay? So what themes is another one we can use, and I believe they actually have look right here looking to integrate flex slider with wordpress, they actually have a plug in, so this is called wu slider plugin you're going to find two that you're going to pick your own, you're going to do a little research look and see which one's awesome, easy, great functions and use that I'm not telling you have to use one of these, obviously another one that I think is really pretty cool, and this is something everybody's wanting to do today you're going to see, like, full screen slide shows, this kind of thing, this is pretty cool, ok, this is one of those things that, you know, it has been a little hot for a while that ah, full screen video in the background, that kind of thing, but this is something that is ajay query plug in, and I don't think they actually made this into a wordpress plug in, but this is something you could use if you decide to go animal and kind of put it all in yourself, okay? It's a it's a decent line of work, but you can get it done, okay, but the thing is, you gotta decide for yourself, do you want to plug in? You want to make it easier? Or do you want to actually do it yourself? Okay, so that's, your kind of cause there, I'm gonna go back, and I want to show you the one that we're going to use the reason why I'm to choosing the one that we're going to use you'll see in a second here, I wanna go to plug ins and, yes, it's a plug in, I'm not gonna go through all that, I'll go to add new and what we could do if we wanted to if we go to search I could just say something like let's search for, you know, responsive slideshow there we go and you're going to see that there's a billion of them out there once again you got a look and see what's what so I got to see is it updated how many downloads lookit reviews to different things like that? Uh you're going to see a ton of them out here the one that I want to use I'm not sure if I can see it right here okay, here it is it's called meta slider and the reason why it's called medicine lighter you'll see in a second it actually takes a lot of those plug ins or those those slide shows that I just showed you and brings them into one plug in and you can pick the one you want so it's going to do all this for you check this out. I really had never used meta slider in the past, okay before, like six months ago, I was kind of looking at it like it's kind of cool for a client site and I was like, but do people use it right? We'll get it downloads I mean seriously one point five million downloads you think maybe it's decent I don't know five star review on two hundred forty seven reviews so we'll try it we'll see what it does you can see here is all last updated two weeks ago that's that's really good I'm gonna click out more details once again got to do that just take a quick look see what's going on you know see what it's compatible with check out the reviews too with the whole thing I was talking about let me close this up you're gonna get used to that eventually obviously I'll click on install hamel install it and I'll say yes I did that for a reason and now been activated I'll go to activate and kind of just follow the same procedure procedure we've been doing school down here let's take a look okay you're going to see medicine later now the one one thing about medicine lighter that's that's interesting is that you you can if you want to this is free and that's that is something else you need to think about with plug ins some of them are paid okay some of them you they're free but to use the service that they're connected to you pay or do something like that it's like a membership maybe you're going to see that this one has a free version but they also have what's called go pro and it has nothing to do with the camera siri's okay this basically means that I guarantee it that they're going to sell you skins which basically means that you get more morsi ss files and mohr appearances on them I bet you money that they have like, one medicine eider appearance right now and if they want, they could sell you more that's fine it's cool. So once we've got it right there, you're going to go to medicine. I'm gonna go take a look for the setting is out there and you're going to see that this one actually created an entire menu system for itself and I'm gonna go over and say I don't want to go pro right now I'm gonna click on that a slider now this is going to go in and basically let you decide what you want to do now this is actually this's kind of interesting because I was just making sure that this is going to work with the themes and plug ins were going to use and this is something you're going to do as well. I activated it before and I deactivated and I got rid of it look at this right here you guys going to see that there's a slide called brian that happens to be my name and if you're looking at this going, how did it know? Well, what a lot of these plug ins do as I'm sure you're very aware of is when you go into entities you're going to make changes et cetera, it's editing it in your database that content will live there a lot of times some plug ins will get rid of it and some will leave it behind if it's a good plug and it'll usually kind of get rid of this stuff it puts in the database okay that's not always a case I deleted this and that was still there okay so may actually be using some of the tables that were press uses so you're gonna see that okay it's right there no, we're going when we first faced this is going to say okay lets go in and just creating new slider so I'm gonna click on new slider here and I'll call it whatever I want later on and let me at it I'm gonna click on add slide and what I first want to do is I want to add some images to this this is going to be kind of a big deal okay because when you add images to a slideshow you really got to be I'm going to be careful but you have to be aware of what's happening so I'll click select files I'm gonna go out you can grab those those class files that we have available is the advanced files you'll see the images folder and I've got just a bunch of pictures you can use these air he's a pretty big all right you're going to notice that they're like twenty six hundred by eight hundred which is big the reason why I'm talking about image is a little bit is because thes slide shows will typically just use the stuff we're going to use all the time. J peg, if ping and usually it just comes down to j p groping and usually just j peg. Okay, because if you do in images and usually j pegs okay, the bigger the image, the longer it's going to take the download. Usually the bigger the slideshow khun b and the better it's going to look at a larger size. Okay, but there's a dance there's kind of a dance we have to do. I'm gonna make it so it's just a doughnut banner or people let me do people these are more interesting. All right, we'll do her kissing the donut that's great, click open now what I could do if I want to use I could go in and actually just select by shift clicking or commander control clicking a bunch of images that I want to use. You want to make sure I usually try to make sure that the images are roughly the same size, because otherwise what it can do is it khun actually put the put the black boxes or black bars and kind of stretch or scale a little bit and make them look a little different? So we're going to try and make sure they're about the same size as you click on each one of these you look over to the right you're going to see the attachment details like the info how big it is etcetera you can if you want to do a little ceo on each one of these so search engine optimization we can add titles to these we can add captions we can go in and add alternate text descriptions and to be honest a lot of this stuff could go a long way because it's just mohr information about your page and about what you're trying to show we do so you know you could do that I'm I'm goingto kind of conserve a little time here and let you do that for yourself okay someone add these to the slider it's going to go think about it for a second and then it's going to put him in there now it's going to try and do some scaling and different things to them to kind of get it done but you'll notice that once we add them in here these are the slides we can always add more so this is basically an image slide show is trying to add some content that we have you'll notice right here that we can end captions and we can add you are else so if I want to add a captain I can say she's looking at a doughnut? How? Ah, okay, so we gotta look caption we could put there we can put different captions for each one of these if you want to and change it, obviously we can make it so there's somebody clicks on it goes to you, earl, we could do that, too, and we also have the option to make it go into a new window or new tab essentially some of the great things about this this plug in the fact that if I click on seo here, you're going to see that we can add search engine optimization or information a body to picture we can adam separate so you can actually optimize this fully title text and alternate text. This is just information that people really won't see. Sometimes the title text shows up it's like a little yellow yellow tool tip as you hover over, but the alternate text typically will just be something mohr for search engines if I click on crop. This is one of my favorite features off this plug in a lot of times when we deal with the imagery, we deal with back on images, especially, and we kind of deal with response if we have a backyard images responsive, for instance, a lot of times what's gonna happen is the give or the box is going to kind of collapse or close in on the object? Ok, let me kind of show you what I'm talking about here, get another sheet kind of burning through my shoes here. So if I have let's say, for instance, I have, and this is for what's called a back on image let's suppose that I've got a diff all right, this is a different page, and I use a little bit of css he's, a little bit of styling to put what's called a background image in that div, the baccarin image may fit perfectly, or it might be a lot bigger than dave, I don't know, but if you take a look, you're going to see, like let's suppose that this is the image information, and with a div, it can actually make it so that the background image is cut off, right? So part of it is hidden, okay? That's, that's one of the beauty parts about putting an image in the background of an object. Now, a lot of times what we wind up doing is as a page gets wider and gets narrower, that background image is going to either get stuck in one place and maybe just cut off the right side or cut off the left side left side. But we want to decide how it does it. Okay, so for instance, if we had a picture here that was let's say on my widest page here I've got a box and I've got a big picture innit here's my picture and maybe I've got a person right here and yes that's the person and then I've got some fluff over here okay somebody takes the browser looks in a smaller device okay and here's the smaller device there's two sides to div what can happen is you can actually have it where the fluff shows and the person that was in the picture over here is in the background actually gets cut off because you can align the picture certain way you can say stick it on the left side the right for the centre if we make sure that it's actually center line for instance it would keep the center of the picture there in this case I want to want to keep it right on line makes sense because you want the person always show that's actually doing a little bit of just being only going kind of decide which wanted to know if you look a crop here you're going to see crop position we can tell exactly what we want to do, so if you decide that your picture is a little more important on the left side you can say something like you know uh you know top left or center left or something like that most of the time center center is going to be perfect so it's going to keep the exact center of that image in the center of the slide show on just two cropping which is awesome so we could go to each image each image out here and set some of that if we want to you can csc on crop for each one you can also see that if you want to you can delete one from here there's a little a trash can right there and there's also a little changed slide image if you want to do that and we can take these it's amazing how many times I just don't explore when I look at stuff like this I didn't realise up until like two weeks ago that I could just drag these and change the order which is kind of cool so you can do that too okay so got her images we get our slider there this is the best part about this cheque this up I'm gonna go over to the right you're going to see on the right over here flex slider our slides nevo slider and colin slider we looked at nevo slider affleck slider those air to that I showed you is some of my favorites okay this plug in has them installed automatically which means you just choose what you want and it's going to stall the right files and get the right thing to happen which is pacing so we tell how big we're gonna be okay uh you can if you want to go out and said things like heights etcetera flex sliders are really simple one I like that one a lot it looks decent you can affect things like this something look at you can affect things like the effect that's going to change so when it goes to slide between images or change images rather for the flex slider weaken on ly fade or slide so slide is going kind of shift images like this fate is going to do a fade the reason why there's something here that are great out is because if we choose another one it may actually give us those options and of course I'm gonna choose the last one that's going to go there we go so now you can pick the right the slider you want that might have the options you want. All right, let me go back to flex ladder okay, so what we're going to do here is we're gonna go out and we're just going to set it up real quick get it set you're going to see we have things like advanced settings if we want we can say let's have one hundred percent wideout put this is a responsive which is great weaken center line autoplay weaken tell howto crop to all kinds of things I'm not going to go through all this you can kind of play around with a little bit just to see how it works for you and we also have what's called a short code this is this I think this plug in is awesome because it gives you a short code or what's called a template included so you can decide either or so I'm gonna go with short code copy that I'm just going to save this and what I can then do is if I go back over to one of my pages that's they go to the home page here and I get down and you guys are also going to see that there's now an ad slider button here which we can use as well I could just go wherever I want to put this thing and I'm not gonna put it in columns I'm gonna put it where it's kind of wide and just paste that little short code that I copied and go up in update and if I take a look girl quick and refresh you'll see that I've got my side show pretty cool so it's doing all everything it needs to do it's got all the fading the sliding got all the buttons you can see all that stuff and if I go smaller it is responsive gotta watch the images involved, though, because the images can either we too big and a mobile device or not. You've really got to be careful. Okay?