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.