Responsive design for WordPress video
Tweetables
Does your blog video display correctly on mobile devices? … click to tweet Use WordPress? Do your videos play at the right size on all devices? … click to tweet
Transcript
Hi, Jon Griffin here with another little tip, brought to you by mayulienterprises.com.
This is sort of a geek tip and also sort of a marketing tip because it affects both. But it’s not geek so much that you have to do a lot of code. Basically, if you want your website to work both mobile and traditional, you need to make sure your videos are also what we call responsive or they’re fluent and they move with the size of their screen.
I noticed a lot of people may have a great theme that looks good on mobile, but their videos from YouTube or wherever, they don’t size correctly.
Responsive design for video
I’m going to show you a little trick in WordPress, a plug-in and I’ve tried a lot of them, because I do a lot of video, but this one little plug, it will help you out, it will make your video size down without any extra work on your part once you set it up which is very, very easy.
To start off, I’m going to show you a little demonstration. Here is my website, my personal one. As you can see on the full screen computer everything is fine, it’s stays within my nice boundary of my columns. What I’m going to do is, show you what happens if you resize and right now everything setup to work correctly. I just wanted you to see exactly what I mean.
We make this smaller, that’s still a big size. We could go pretend we’re in a smaller screen and you notice that, that video is getting smaller and smaller and it will only go to a certain point, but right there it’s probably about what a mobile phone would be. If you look here, you can see it’s still playable, it’s still usable. As we go back up to full screen size, we’re back. It’s also my theme … it’s also what you call responsive of the text move down and things where in the right orders.
What WordPress theme should you use?
Right now, I’m mostly using shoestrap, which is a responsive design for WordPress, but this in this case I’m actually using genesis theme and it works just as well. You have to make sure that you are using a responsive theme that’s the buzz word, a lot of the genesis themes aren’t. As I said, I’m mainly going to use shoe strap, from now on, because that’s using the boot strap, Twitter. I know twitter is going to be maintaining that for a long time. I know they are tiny little company, but just as a side now. Genesis works, most of the new themes are going to be responsive and just make sure it’s says that. In this case, I just never bothered to update, it’s not a big deal on my personal site.
The easy solution
What am I using? You can see right here that I’m using what’s called FitVids for WordPress. You can just look up FitVids, F-I-T-V-I-D-S. What we’ll do is, we’ll deactivate FitVids for WordPress and if we go here, we’ll refresh and you can see that I have my normal tiny generic YouTube embed code and that’s what shows up. There is ways on YouTube to make it bigger by default. I just left the generic one in there, but you’ll also notice as I get smaller.
Now it’s running off the edge. You can see here, even though that looks pretty good, it’s still running off the edge and now it’s even less. That’s why you want to have this responsive with your video. We’ll go back up here and let’s activate FitVids for WordPress. We’ll go here to appearance which is not your normal place for savings and you go to FitVids.
The only thing you have to put in there as body, you could post, but I basically don’t do that. You can add the jQuery from Google, if you want. Most of the new WordPress stuff already has that, but it doesn’t hurt. It will save the changes and then we’ll go see what happened.
All right. Now you can see we’re back to our large size and if we get smaller again it all fits in there. Granted it is right by the side, but that’s because it’s a browser. If you are on your cellphone it would look tiny but different, but that’s just a good test, you can check out.
That’s a quick and easy way to add a simple plug-in and make your site completely responsible, if you have a responsive theme. Now you don’t have to worry about your videos looking very strange on certain devices, so I hope that helps.
Resources
Archives
Tags