Wordpress® : Video, Slideshows, and Other Essential Features

Lesson 1 of 6

Creating Responsive Videos

 

Wordpress® : Video, Slideshows, and Other Essential Features

Lesson 1 of 6

Creating Responsive Videos

 

Lesson Info

Creating Responsive Videos

I am welcome to adding videos and galleries toward press my name is brian wood, and we're going to get started, so we've got a lot of ground to cover here because we're trying to take wordpress further. We're trying to work with our themes and in this class and this class, we're going to go in and kind of start to add a lot of the really cool stuff that you want to do. Things like responsive slide shows on video and icons are icon fonts at hosted fonts just add a lot of different things that we all want, teo, and you're going to find it with wordpress, there's a lot of themes that come with some of this stuff and you need to explore the theme, and by exploring the theme, you'll see what I mean here I've got I am, by the way, working locally, you're going to see appear that it says local host and as you work more and more inward press, if you are going to develop themes a lot of times you are going, you're going to work on it on your machine or some kind of server local locally because ...

it's going to make it easier down the road, it really is, and that way you're not working off of a live site, that type of thing. And I actually have what's called ma'am open and I work with what's called ma'am pro and that's mac basically there's ma'am ma'am pro on there's also wampum zamfir windows, that's a little crazy, but this is basically your server. This is your php you're my askyou all your database, everything that's going on so this kind of helps me to run it locally, if you will. So that's, why long winded that's why you see local host up here? If you're working on this and you're working off of your host like go daddy one one blue host, whatever it happens to be that's fine. Okay, as long as he gets your w p admin and you can log in now what I'm what I'm talking about here and what we're going to start with is we're going to start talking about video, okay? But first I want to kind of segway with just talking about themes in general and some of the things you need to look for first because they might already be there. I mean, we're going to try to, you know, start to work with a lot of this, but we may go through all this trouble to implement it is still a plug in or something, but I might already be there, so if you look in your dashboard and I go over to my appearance a lot of times what I'll do is I'll go and once I get my child team activated okay, a lot of times you're going to make at its to a theme we want a child team and we went over that in the previous class when we talked about you know, editing our themes without editing the theme files you'll see that we have the customizer, so by looking at appearance I'll see customized and when we get in here every theme has a little bit different settings in here and what you see right here with with my theme the creative life theme it's not gonna be the same with what you see okay, unless you're running the same thing in here, what I tend to do is I tend to look and see if there any options or anything related to what I'm trying to do. So if I'm trying to work with let's say icon fonts or maybe I want to work with google funds like hosted funds, I'm gonna probably look here and see if there's some kind of option for that I actually have themes that will do all of it and they'll be sitting right here ready for me to go so I don't I don't have to worry about installing anything later, okay, so this is something you want to look at first another thing you're going to do to is if you are working with let's, say, video and your own hosted fonts type of thing, you're probably gonna want to once you install a team, go to the page is go to the content of post whatever you're you know you're working on and go into the out of there, go ahead and edit one of those and just look and see if sometimes you'll actually see that there are buttons and different things hanging out that say, beyond just add media, you might say something, see something like, you know, farrakhan's or icon funds or video or in bed video or maybe slide show, so something's will automatically include that content. The other thing they you could see is if you look over on the left, you could see under settings or tools, perhaps you might actually see categories for this this different type of content you want to work with, okay, so I'm just trying to give you a heads up is how we're gonna work and, you know, don't reinvent the wheel that's it I'm getting to what we're gonna do is we're gonna insert some video and talk about response of video and what that means and how it works and why we need it. Okay, we're gonna take a couple different pass here because when we talk about video when I first started doing web, the thing I thought about was okay I'm going to take a video file and you know, back in the day there was other video files we worked with but I'm gonna work with something like an mp for file let's say for a video and I'm gonna take it and just stick it in my page and it'll work right? Well, that's not the case today we can't really do that you can't take one single video file and stick it in your page the reason why? Well, we have a lot of operating systems to deal with and we also have a lot of you know different all west is a swell is different devices to work with as well as different browsers toe work with that are going to demand something that they want okay, so if I take one video file format, stick it in my page it's not guaranteed to work so there's a couple things we can do to help that and one of the things that we can do is to use a social media sharing site and there's a lot of those out there on dh just to give an example, you know, we've got youtube of course youtube is an example of that and a lot of people will do this where they'll host or take the video that they've got and they'll upload it to that service the sharing service and there's video villard you know all these different ones out there uh and they'll upload it up there and this service itself will actually give you a link to the video and they'll also in the case of youtube you see this video right here if the person uploaded the video, they can actually determine if this is possible or not you'll see a lot of videos will like to share so if I click on share on video does this youtube does this a lot of them do this they will actually give you a little bit of code and it comes in different formats comes in the format of a share link like this which is kind of like a I guess you could say like a short girl that youtube understands and anybody that works around youtube understands as well ok, so it pulls in the video we also have what's called in the bed code this is typically sexy right here and I frame and this is code that if you wanted for instance take the youtube video and maybe we're not working out where press site were working on a static website static page you just want to put the video on there you could copy that content into your page and it would just work okay, one of the great things about these these social sites like this is that they take care a lot of heavy lifting for you. Okay, now what I mean by that I kind of told you about the mp for things like I took one video and let's say stick it on my page it's not gonna work everywhere, right? Because I already mentioned that these days we're actually using html five a lot and we're using video tags and different things like that and if you I want to get it to work properly, you're gonna actually have to serve different video file formats so instead of just mp for you know, we've got a sort of sort of like oxy or a we've got web bam and there's a lot of different formats out there typically three if you want to care about some old school stuff to, uh and maybe even a flash fall back to get this stuff they're working get video actually work, which is just crazy, so I'm always telling people I'm like, you know what? You go through the headache you get your own video player, you can set all that stuff up and do it or you can host your video on a social site like a video or like on youtube, okay, they take hera left for you they give you the code and they say, stick it in and what's going to happen is it's going to go out and depending on the device, depending on the size, etcetera, it's going to serve the correct video format and get it to work? That's the idea that's why this is so awesome what's great about youtube and what's great about video and all these other services with wordpress is that word press actually has the ability to use these really easily you just paste in the girl and it's already built in a wordpress, so I'm on youtube and I want to take this video for instance, I can select the link right here, okay? This is typically where we're gonna do it and I can copy it, okay, if you're on video and other services, you can do that too, and let's say I go back over to my admin and on one of my pages and I want to put the video out there, I'll school down a little bit, find a place to put it right click go ahead and paste and what's really cool about this is you're going to see that it's going to go in and allow me to add the text out there, you'll see it right there and I could start to work with the video and there we go, it just kicked in it took us a freak me out. I gotta be honest, I was starting to sweat up here because it wasn't working. Uh, so so there you go. You're going to see that with some of these these services, we actually had these little these alone bed codes, and we also have the links so you can just put in, and it just puts it right there in the editor so you can see it, and I can actually, if you take a look, I can actually start to edit this, move it around, you know, ads in different features to it, maybe add some styling to it if I want to, and you'll notice that if I look in the upper left corner here, I've got a let's get rid of it or I've got an edit button here, so if I click on edit, you're going to see that in our gallery the way we could, and this is one way to do it. You can actually insert media an insert from earl, and this isn't like I said, this is another way to do it, so we've got the youtube video there. Now you've got to be careful with some of these social sites like youtube, if you try, if you actually copy of earl, it doesn't have, like youtube in the girl sometimes it it won't recognize it inward president won't do it so you just have to pick the right girl um let me go and close this up so if we wanted to put another video out here, for instance and I want to put it in one of my columns, I'm gonna clear space you'll see that we also have the ad media button, so if I click on that you'll see that we have insert media of course, and we can if we want to upload video to wordpress wordpress actually has a category here sorting if you will to show you the video files you have that's kind of assuming that you're taking care of a lot of this stuff like what kind of video? It is the right code to get it to work you too we don't do that we just give it the oil if you look right here answer from you, earl this is just another way you could do the same thing I showed you just pasting into the actual editor so you you put the you are all right here. You'll notice that for every one of these we actually the title which is can be good for search engine optimization for ceo to give it some information about the video, what it does, how it works and it also a lot of times will show is a little ah little yellow tool tip in the browser not always so this is just another way to do that um down here towards the bottom let me scroll down a bit and you guys this actually this freaks me out this is new and wordpress in the past if you notice nurse that the bar up here for the editing the bar actually now follows you you used to never do that and it's awesome but it still freaks me out I'm still like what what's going on so you used to have to always school back up or minimize or whatever but okay, so it's doing it? I'll school down here and you're going to see that what I did was for this theme for the creative life theme I wanted teo to kind of bring this in your face, but word for press has a serious of short codes built in and you can use if you look down here. You'll see for instance, like the word gallery. We also have audio caption and video that's why I'm mentioning these because videos right there you can take one of these shortcuts and just simply type it in and what it will do is it will say, okay, we know you're going to put let's say audio, for instance, but it's going to ask you where is the audio file and ask you to upload it, put it up on the word press okay, put it up in here up your area so what I'm gonna do is for instance is I want to put another video I can also take video I'm just gonna go up my page here and I want a video let's say like right here I'll hit a return I'll put this little bracing this type in video left and right and you guys will see that I'm gonna update the paige a little bit here when the school down a bit you're going to see that there we go it's going to put in a little placeholder for me and say okay, you just told me you want a video now there's no video so what you want to dio so I can actually come up to this click on it or hover over it and you'll see let's edit so now what I could do is say all right, I want to go away and we're going to replace this video we can add a poster image and we can have what's called subtitles I'm gonna click on replace video here and it's going to just let me upload a video now once again, this is a video file format that you're choosing and it may not be working on every single thing that you look at it in, so this is something we have to be careful with we have the video category it's kind of you know, saying here we go that's the sorting of it if you will so if I click on select files it's going to let me go out to my hard drive and actually grab some video file a determined and put it up there you will notice here there is a maximum file size or limit of thirty two mags which for video that's not a lot. Ok, so once again is just something to think about. All right, the great thing about this to those that we could if we want to using this method using that video short tag we could go in or the short code. Rather, we could add a poster, a poster for videos essentially what you see before it plays so you could create and what I used to do all the time is create like a picture off the video, take a snapshot of it and actually put a big old play button on the top of it. That way people know that this is something it's interactive, not just a picture and you can click on it to play and then you could just choose that picture is a you know j peg if ripping and put that in your media library and use it this also losses to add what it called subtitles if we want teo we're not going to do that right now, but subtitles allowed people to actually see what's being said, etcetera, and I'm not gonna go there, so I'm not going to close this up, and I'll cancel the edit. And once again, this is something that could include, but I'm not going to, so I clicked on the x and get rid of it. There we go. What? One thing I want to mention here that you are doing is as you start to include content like video, different things like that. A lot of us will stay on what's called the visual tab, which makes sense. Okay, we want we want the visual editing. We want to be able to, you know, change the fonts, the colors and see what we're doing. Basically. But sometimes if something happens, something breaks. Maybe something doesn't refresh. Okay, you can either update the page, or we can click on text and see the raw attacks, the raw code. And that way you could see what's going on a lot of times. If I pay something, I might actually have been accidentally put it inside of another tag. Okay? It might not work properly, so you want to see if it's all by itself and it's actually working. Okay, we'll go back to visual here so I just I already updated the page that's cool well may go out and take a look at it and I'm going to update or refresh refresh here that's cool down a bit you're gonna see there is my awesome video now we've got just a teensy little problem here. Okay? It's not fitting and this is the this is the crux of the bane of video that you deal with um if you pick a video a lot of times and youtube especially it's gonna pick a size and stated that size and that's it okay if we want to go in and we want to make it so that it actually is responsive that's the killer here that's the key there's something that we need to do we can do it with css if we want to but it's going to be a little bit difficult to do it that way. Okay? For instance, we're going to talk about responsive images in a little while here, okay? And what I want to do is just mention this I'm gonna go to this image right here and we can if we want to we're looking at our life site or our site locally I can see what the code looks like using the web developer tools okay, we looked at this in the last class uh where we edited the theme if I write, click out here, you can see inspect element, most browsers will do that, not all you can also go up if you want teo and find what's called the developer tools to open those up, and usually they're hidden in a menu somewhere in internet explorer and all the big browsers I'm gonna go over here and there's usually like a little inspector thing. I go and click on an image like this right here, and I want to point something out right here. If you look on the right, you're going to see that we have our first all. We have the ht mail here, and we have the css on the right and this this is what the developer tools for that's the idea, a lot of things, actually, but if I look on the right over here, you're going to see that I have what's called max with one hundred percent. We're going to go over this and responsive images, but max, with one hundred percent is css for saying, don't go any larger than your original size, okay for an image if it refers to video it's, whatever the final or the original video sizes, if we set what's called a max witt on a video file, it'll become responsive. So it'll allow us to actually, you know, fit at one hundred percent size its size and if it doesn't fit inside of a column or a container, it'll shrink to fit, which is just so cool. That's awesome. Okay, these magic it's dead simple too the problem with this and this is where we all started when we started with css for nice rv css and I saw responsive and talked about video I clan glommed on to that and I'm like, oh, this this right here with the heightened all that kind of stuff is awesome and perfect works the issue with that, though, is that it's not going to work for everything because we don't have all the same aspect ratios for everything. Okay, this doesn't take into account a lot of things, so it's not gonna work on every video of your video file aspect ratio etcetera so we need something else. We need something tio I don't work with intrinsically intrinsically work with the aspect ratio let's say to make it up so it all everything just works perfectly okay, so what we tend to do is far is working with video to try and make it responsive there's a couple things we can do here and let me go back over and take a look first and foremost, we try to max with thing a lot of times it's not gonna work properly it's gonna work? You're gonna look at me like oh, awesome were good but it doesn't work out everything so we need another solution and have it work properly for scaling sick okay, I have this site here which you can actually find in that that pdf of links that you've got this is a fit bids js okay and this is a script, if you will that javascript file with uses jake worry that will actually go out there and figure out the dimensions of the video the aspect ratio of the video using css using java script in jake we're in all this fancy stuff and get it to work properly. Okay um this is something that I've used in the past and it's really effective really useful and if you watch, look what happens here this is an example video that they have on the site so the first thing everybody does with responsive and by the way responsive the international symbol for responsive design is this. So if you ever see somebody do that, you know what they're talking about. So if you take the age of the browser and I grabbed and I go like this and I start to go smaller, you're going to see exactly what it's doing look at the video the video is scaling its also scaling proportionally, which is key you can have video that's in a different aspect ratio that will get cut off if you do it the wrong way or different things can happen this is from video it's it's a uh you know a service if you will and you're going to see that this is actually a j quarry plug in that you can download if I click on download here I go to the the actual download page which is right off of that you'll see that this is going to require some j queries and jobs secret files on different things we have to work with okay if you feel like you want to dive into the deep end on this you can that's cool that's totally cool you can use this and start to work with it. There was actually a fit vids plugging for word press but I believe they took it down it wasn't it had been updated for a long time on I actually used to use it inward press and the reason why it was awesome was because it was a plugging you could just turn it on it would do the things you see here automatically which put it in the paint on the head of the foot or exactly where it needed to go and it would automatically create your content get ready to work to be honest one of the things that is really difficult about responsive video is that when we place a video when we go back over here? If we place a video from a social sharing site like a youtube a lot of times it's going to use an eye frame, okay, it's not gonna have any kind of container around it. So the ice cream is a container. Okay, it's a place to put stuff I know, but it's not going to have a container around it like a div around it. And we need that to create the css to get it to work. It's gotta be inside of a deer or some kind container some content. Okay, so by default, that doesn't happen, which is unfortunate. So we need to figure a way around that we could either go to every video on our page and say, well, let's, put a div around this thing and let's add the right css and added all the work. Or we can do a couple sneaky things here which actually really pretty effective. I have this link, and this is also in the pdf thinks that you can take a look at this is actual media dot com and it's it's really cool if you if you're looking to do stuff, obviously we all know we can search, we can go out there and google it as we all say but with wordpress there's there's tons of stuff already done don't reinvent the wheel don't try and figure it out for yourself unless you're really you know want to do that then go but you'll see here that this is an article that says how do you make the default video on beds responsive it's actually pretty neat you'll see here that it's just going to tell you you need to take this code right here and add it to your functions file so functions dot php and if you create a child team that's going to be the child dean function and then we're gonna add this to our css file so that's going to be able to add that there so this is going to make it so that anything that we have a ce faras default video on beds will be responsive now that means that the video short codes that I was talking about okay because a lot of times this kind of thing is not gonna handle I don't believe this actually okay it actually handles I frame objects in beds which is great so it makes it responsive and if you look right here the the sum of the little things that we need to think about here it shows videos in sixteen nine aspect ratio which we might not have we might have for three we've got tons of video aspect ratio so this this solution might not work okay, so it's something you need to consider uh but this is something we could do if we want to all right so one thing we're going to do what we're going to do rather is we're going to go through and we're going to take the video of the youtube video itself I've already got it in the page I'm going to show you how we can use a plug in to get all this toe work is actually really pretty amazing so I'm gonna go over to our plug ins here are plug ins page rather inner admin so I'm going on unemployment and I'm gonna go to add new plug in now if you're if you're getting started with word price maybe you're a little bit in the world press are a lot in the world press I don't know some of us try and not use that many plug ins because you khun just gum up the works a little bit with too many plug ins they can conflict with each other just too much going on to money loads to money you know scripts loading etcetera so some of this we can actually do ourselves but it it I can take a lot okay that's why I'm trying to show you guys ah plug in method and also show you the raw code for a simple method so if I'm gonna do a search for responsive video let's take a look here you'll see that there are a lot of different video responsive and betters if you will a couple of things to think about here if you do this if you go this route with a plug in it's gonna make your life a lot easier it really well if it works okay now this is a lot of these plug ins to think about these are actually for uh social sites he's therefore for youtube is a for video for all those types of sites if you decide that you want to host your own video or have your own video you're probably going to be looking for an html five plug in or any channel five player that works and one of those that I asked did I look at used quite a bit of video dot js there actually is a plug in for that we'll take a look at that in just a minute one thing to look at for plug ins I say this every time in every class and I know you're going to be like I know that you gotta look at sea when it was last updated you got to see if it's compatible with your version a wordpress if it's not it khun just not work in worst case scenario it might break something look and see how many downloads there are there's a lot of downloads you're probably thinking a lot of people use this thing look at the reviews you gotta look at the reviews and see if maybe it works some people actually say, well, this plug in conflicts with this other plugging that everybody uses we still know that before you put it in there and activate it, okay? So I a lot of times we'll go and look at more details and just see what's going on you can see ok lotte lot of lot of you know, different information about how it works, etcetera some good reviews for this one that's great a lot of times I look at installation and I love this kid me this is this would be me when I make plug ins just do it thie usual way okay, so so we'll install the usual way uh if you look at screen shots it's always get a look and see how it actually works you could kind of get a feeling for what it does and how it actually handles things. I always look at the fact I was looking see, you know, if I have a problem if there's certain things that aren't working, they're usually put it in the frequently asked question and I always look at reviews go look at reviews and take a look once again if it says it's gonna conflict with something or this plug, it just doesn't work with four for a one or you know whatever version you might have pay attention to that okay, parts I'm gonna install this so I will click on install now and it's going to take a second's gonna do it's downloading its unpacking etcetera and I'm gonna activate it so I'll click on activity that'll take a few seconds here now now that is activated what I can do if you take a look advanced responsive video I'm betting you'll see it right there your plug ins are organized and this is embarrassing but I didn't know this until like I don't know six months in there obviously organized by alphabetical okay I used to wonder I was like why isn't at the bottom is the last one installed anyway that's why uh so we can also sort those you're going to be right here it says let's go to settings I want to point this out real quick you're going to see things like contributing donate contribute means you can actually help fix it if it's broken you can make suggestions etcetera that's a great thing if you can go that far donate if you guys are going to use a plug in trying donate I'm not I'll get off my soapbox but it's a good thing they can keep doing it then I'm gonna click on settings and it'll take you over to the settings over here and you'll see that it's the air video on better, better under settings there we go and this is where we're going to go in and start to see what happens how do we do this? How does this work okay, so we can say we wanted to load a certain way a maximum with uh got a lot of things out here we could do thumbnails you can set different parameters this is actually pretty cool if you've worked with for instance youtube, I'm just using that as an example because lots of us use it if you use youtube for instance, there are a lot of different parameters you can use for it, which basically means you can say like show show ads at the end auto play you know, run from reverse run autoplay run verse etcetera you know and palindrome do things like that is a lot of parameters you can set those are actually found you have to actually go to the main page is for each one of these services like youtube there's a lot of really cool things you can set on your videos and this plug and let you do that which is really neat so we can say that there are customs short code kid tags we can use you can see right there which is pretty cool and you can change the easy if you notice these are all the video services that are supported like funny or die you've got, you know, youtube a flicker ah, lot kickstarter all kinds of stuff. So just take a look and see if this plug in supports what you're trying to pay, stay in what you're trying to put in and even supports my space. That's awesome. Cool. Okay, all right, so I don't really do anything, but I'll save it. That's fine. Now, buddy, go to my pitch. We've got this embedded, this this in their rather I'm going over my page and take a look, and I think it was the home page of put that in there, you're going to see that we have right here the actual the youtube video there. Okay, you're also going to notice that there's like a red link down here, something interesting is going on. I'm going to go to my page here and this is the life side. Obviously I'm going to refresh and see what happens. Check this out. We're pretty much done, so it is now responsive. They used the correct css and everything that work. And once we flip over from column to two column one, you're going to see it's going to do the right thing and allow us to see the video. What I love about this is that it's going to use the existing youtube and you know different supported video file formats social services that you use they've already pasted in there so it's going to kind of go find those and say all right let's fix those let's get him to work the other thing we could do if we wanted to let me go back over the out of here you're gonna notice now that it put in any other above the editor here put in a little button called in bed video so we can handle it this way if we want you for instance so if I if I come in here and I'm like okay let's put another video out there I'll clear a space for it and say right there I'll come to imbed video click on that and it's really dead simple it's very similar to what we're doing but in here the reason why I love doing it this way is because it's going to allow me to set some options here that we could do visually so if I want to I can go back to youtube for instance and grab that girl typically it's the you are all here they will tell you if you look right here for blip gain trailers, yahoo, et cetera on any general I frame pasty and bed code for all others paste the girl that is super important you have to pay attention that otherwise it may not work so I'm gonna come in here and just paste that youtube I'm gonna come out here and you're going to see once you interact with the rest of this dialog box if you look right down here if you see this this is it called a short code that this thing is automatically doing this for us if you see that short coach show up down there, it means it recognizes the video file if you don't see that it might throw in error and be like I don't know what you're talking about so try again okay may be the wrong year where l made the wrong code etcetera so once you pasted in there, you can see the obey and bed code if I look right here, I can see the different alignment methods we've got, so I've got left, right center I typically you know, it's your design, so pick what you want you're going to see like a line center. Now there are some ways that you can actually load this these air called the modes I wouldn't mess with this, to be honest, some of these ally to do things like auto play some don't like normal, I believe lets you do auto play lazy load doesn't it's not the other way around film nail is going to actually just put it in a thumbnail in there, so if you're if you guys want teo, and if you're curious about what these do, but I would suggest is go to the plug in home page and take a look, look and see what they say about it. Some plug ins won't even discuss what they do. They'll just say here the options for you, you choose it updated and see what it does sometimes that happens, so I'm gonna leave it as default if you want to autoplay or not, you can say yes or no, I'm gonna say no, typically we do not listen. If it's a background video, a full screen background video, you wanted to autoplay, okay? But if this is a video in in the content itself, we typically don't all right. It's, your call if you want to mess with people, go for it, but you're going to be right here. Maximum with pixel, we can set a maximum with so if you have it in this may be a single column design and you know that the video, you don't want to go full eleven hundred or thirteen hundred, we could just say, hey, you know what? At most, I wanted to be a hundred pixels wide, something like that. Now you need to be careful with the maximum with because you could have a video from youtube that was uploaded at this big okay that's the size of the video or maybe that big and then you say maxim with eight hundred it's goingto let it expand and get all nasty looking, so you've got to be really careful with that we're trying to pick the bigger videos bigger size videos that is you could see the aspect ratio if you want to change that you can even go hd can go different things to your call there are also what are called earl parameters and these are the parameters you can get from youtube these air special little things you can add at the end to say no auto play this it's like I was start start going with before, you know, play in reverse, you know palindrome do different things, so I'm gonna leave it alone I'm just going to click insert short code and then we go you're going to see it's going to throw the short code and there's actually to be honest it's very similar to the short code we reason before except this tells you what it is it's a youtube is not just generic video and it has the settings built in we can if we want to just go right here to the short code and entities, so if I want autoplay aiken typing yes yes he does that mean yes if I want well I could just keep it no it's your call so okay let me do this I'm gonna update it do that scroll back down take a look you're going to see you still have the imbed code right there just good I'll go back out to the site and do a refresh and you'll see I'll school down here and there we go pretty much the same thing it's the same video it's going to do exactly the same thing so it's it's it's within its container that's the key okay so if you have a video when we just take a look over here I know a lot of already get this and I'm beating a drum here but if you have a day of let's say a devora content area or let's say a column okay like this is a column or something like that if you're putting the video in there you've got to be aware of how big it's going to get that's that's it because your biggest width and we're talking desktop here okay, we're talking desktop if you're at your widest with here if you don't set a max witt it's going to try and take the video and kind of go pretty big all right, if you notice look at the video that I have here it's it's not playing right now but it looks kind of nasty right there. But as they get smaller, is looking a little bit better. Just something to be aware of. Sometimes you can't handle that. You mean, you can't deal with it or do anything about it. Ok, it just depends on what the original video looks like. Okay?

Class Description


Videos and photo galleries bring your website to life. Learn how to add them to your Wordpress®  site in Wordpress® : Video, Slideshows, and Other Essential Features with Brian Wood.

Brian has spent years teaching designers and small business owners how to establish and grow an online presence. In this class, he’ll explain how you can use media to enhance the content on your website the easy way. 

You will learn how to:

  • Make video look great on all screen sizes
  • Add a responsive image-based slideshow
  • Use hosted fonts (like Google fonts)
  • HiDPI (Retina) images
  • Add SVG content

Setting up and running a content-rich and responsive website does not need to be complicated. Learn the how to add video, slideshows, and other essential features to your website in this beginner-friendly class.


Software Used: Wordpress 4.0

Reviews