Full Video Transcript Provided by Mally LaPete
Hey, y’all. Welcome to another WordPress Wednesday. My name is Kori Ashton here in beautiful San Antonio, Texas.
Today is going to be a very quick and easy video on how to make our iframes responsive. A lot of times there are videos that are given to us and they’re set in sort of an iframe type of player. Or, if we’re using our Google maps, and that’s all set inside an iframe scenario, or maybe if you have some old code and, again, it’s all set in iframe. We know that in our new responsive designing in our websites that ebb and flow sometimes overlap. We’re just going to get into this today. I’ll move right over to this.
I’ve got an example here. I’m going to fly off the screen so that you can just pay attention to what you’re looking at. You can see here that I’ve got a video embedded. It’s actually coming into — it’s sliding into or, it’s sliding over into my right column. I don’t want it to look like that. It’s completely overlapping the right column.
If I were to shrink down my screen here and let you see all of this (let’s see if I can do that for you, shrink this down). You’ll see that it just stays put. The video doesn’t shrink down with me. It’s very frustrating. How do we correct that? That’s probably why you’re Googling for this particular video. I’m going to show you a super simple, little bit of nerd code, so I want you to be sure that you have a custom CSS box in place.
Most themes these days do have that capability. Inside of your theme options you’re going to be looking for a custom CSS box. That’s where we’re going to go tinker for a minute. If you do not have that, be sure that you’re using a child theme. If you don’t know what either of those are, I’ll put a link to a couple of videos just below this box right here so you can check those out (or in the description box below). Check those out and go over and watch how to create a custom CSS box using a plug-in, or how to create a child theme even using a plug-in. Pretty darn simple.
But you need to have those things in place so that we can drop in this short snippet of code, and we’re going to fix this up. Basically, all we’re going to do right now is we’re going to set a new box around this video here. We’re going to set a new box around this area here so that I can tell it, depending upon the size of my screen, how large this iframe should be. Here you go. You’re going to go behind the scenes for a minute. You’re going to see that I have this bit of nerd code written inside the text area here.
Any time you’re using iframes, you have to go into the text mode and not the visual mode in order to paste that in there. Here’s my iframe that I’ve got in here. All I’m going to do right now is add div class=”video-container” All we’re really doing is creating a new box around this iframe that’s going to be responsive.
What I want you to be sure you have spelled correctly is video-container. There needs to be a dash in the middle of it. It needs to look just like this. Then at the end of your iframe, all the way down here at the bottom, we want to throw in an end div class [ /div ] Basically, all this does is open a box and close a box around this container. I’m going to click Save Changes. That’s going to save my changes.
All that’s done though is told it -Okay, here’s some code around it. -We have not addressed that div class just yet inside of our style sheet. That’s our next step. I’m going to do something. I was Googling around and found a really great article over here on Smashing Magazine. I’m going to slide off the screen again so you can just check this out. “Making Embedded Content Work In Responsive Design.” It’s a really fantastic article. I’m going to put this link in the description box below, as well, and give you some more ideas of exactly what it is I’m doing.
They also have this for you — you can, literally, just copy this and paste it. That’s exactly what I’m going to do. I’m going to copy that first one that says video container. I’m going to go into my stylesheet, down here in my style sheet, and I’m going to actually paste it in right here. I’ve got video container. Ooops. Back up.
You’ve got to have that period in front of it (that is what sets it to be a class) period video-container and then all of this I just pasted it right in there. It also tells you inside this article that you also need to affect the iframe itself. So, you’re going to paste this bit of CSS as well. We’re going to paste it in right after it. Now I’ve got, brand new, inside of my CSS box over here, I’ve got video-container and all this nerd code and the video-container iframe that affects specifically the iframe.
Okay.
Literally, just copying and pasting those two different lines, and making sure that inside, over in your iframe area, you put in the div class around it. Done! That’s all this is. I’m going to slide up here. I’m going to save my changes. I’m going to slide off the screen so you can check this out. As we come back over here you see this is how it was. I’m going to click refresh now. And look how nicely that sits in place. That’s it.
And watch when I shrink down the page. Look what happens. Look at my video. Look at that, you guys! I could still click play right here on the spot. Isn’t that tremendous? And that works that simply on any WordPress website out there. How cool is this?
I hope you guys are nerding out with me on WordPress Wednesday. Be sure to subscribe to our channel. There’s a little bitty icon in the bottom of the corner here that you can click on to subscribe and every single Wednesday you’re going to be getting one of these awesome, free WordPress videos from yours truly. Have a great day.
We’ll see you next WordPress Wednesday. Bye, y’all.
