How to Fix WordPress oEmbed Video Size Issue

thank you so much for watching the press
Avenue YouTube channel my name is John
and today we're talking about WordPress
5.0 s editor which is also known as
Gutenberg and the problem we're having
is how to make videos full width or at
least full to the frame that they're in
so let's get to it so this is just our
website pres Avenue com and we're
actually working on the final videos for
our new course which is securing
WordPress with with HTTPS or using an
SSL certificate and what we have done is
to move over here this is the course
page itself for the one of the overviews
and if you look here we have a pretty
wide area to work with but the video we
embedded sticks here in the corner now
if I go to edit it with the WordPress
editor no matter what I set it to it
actually doesn't fill the whole frame
and I'll show you what I mean so here we
go here's our little intro the embed
here is of the Mayo video but it can
actually be anything Oh not anything a
lot of things so Vimeo YouTube I have a
list here of embeds blip cloud up
CollegeHumor Facebook Instagram meetup
comm reddit pull daddy Ted etc so if you
took a Ted video as a 4.0 you can paste
in the link into Guttenberg and it pulls
up a special Oh embed box so I'll put
this list in the blog post below but if
I go back to my lesson here I have what
is SSL and if I click here whoops if I
go to the pencil this is my video so how
I added this block is I went to plus the
Mayo and there it is
see that and then I paste in the link
and I hit in bed so there it is I'm
gonna click embed here so if you look
right now we have a justification of let
our sorry it's Center justified I can do
it left I can do it right I can do a
wide width which looks great on this
back end editor and I'll actually leave
that one the same but if I go to update
give it a second more than that and I
view the lesson you'll see what I mean
so here we are this was top one was sent
to have a full-width and it's very much
does not come over here to the right and
this bottom one was just set to a center
alignment or justification so that's
what I'm talking about so if you run
into this full width video issue or any
embed we'll show you how to fix this the
last thing I'll show you is well we'll
just make it as wide as the screen so if
I click this video and I go over this
one which is full width so on the editor
I'm having edge to edge no padding no
margin and I click update just give it a
second to update
go to view lesson again the editor is
supposed to solve all these problems and
it just creates him so it's not quite
working if it does work for you your
theme has a special tag that we're gonna
add into the functions right now but if
it doesn't this is how you fix it
so I'll leave this right here and I'll
come back to our site on the back end so
I'm just going to go to dashboard and
then I'm gonna go to appearance so we're
using the beaver builder child theme
this can be applied to astra 2019 or
anything else that you want to use we're
actually gonna go to the theme editor
now we do get a warning because this is
considered cowboy coding it should give
you a warning I've already turned it off
if you mess up anything in here you will
take down your site so the other way of
doing this is to log in through FTP go
to the theme folder itself and go to
functions dot PHP and it essentially
bring it to this
so I'm beaver builder there are not a
lot of functions if you're used to
Genesis theme framework there a ton but
a beaver builder there are not very many
so we're gonna create a so enter down
I'm gonna create a comment and I'm gonna
say responsive videos or om beds o
embeds alright and then going to enter
down a line 14 it can be any line
whatever you got and then under the
developer dot wordpress.org there's a
responsive embed content theme support a
little snippet here that I can add in
alright I'll just highlight this and
copy it go back to that line 14 and
paste occasionally when you enter down
it adds the two lines so if I added that
and you pasted you'll see it in this
kind of gold brown color you just need
to remove these I haven't doubled out
but just to show you
WordPress does add those additional
lines so you want to make sure it's
exactly how it is over here on 'theme
support again this is called cowboy
coding I'm editing the code if I take
out some of this stuff it'll completely
break and take down the site so that's
my warning to you I will do a video on
how to FTP in as that's been asked a
couple times anyway and theme support
responsive embeds that's what we want
we'll go ahead and hit update now if you
have any kind of caching WP rocket WP
fastest cache I mean there's a hundred
of them make sure you clear your cache
so I've WP engine and they have a cache
thing here if I open a new window
doesn't have to reload everything so I
wait for this to spin and I'm done now
when I go back to here if you remember
the top video I set to full width and
the bottom video was just regular if i
refresh this page
now I have an edge-to-edge video just
like it shows in Gutenberg now there are
white margins on the side of this it's
because I'm viewing it on a 4k monitor
and it's absolutely huge but I did just
want it from the edge to the edge with
this margin here as opposed to I guess
they're all inch to inch now that fixes
all of them right away sometimes to do
anything else so now if I go back to the
lesson it could be a page a post this
just a post type you know it doesn't
need to be lesson but this happens to be
learn - and if I look here just adding
that responsive tweaks all the videos so
this one here is set to full width and
this one was set to regular but they
were both matching so let's remove that
block they're both matching the width
that they were showing lastly we'll let
it save it always takes way too long
pains me how long it takes now I got a
view lesson and then there it is that's
exactly what I wanted it's responsive
and it just works what's nice about
adding this snippet to is kind of
touched on it you have a hundred videos
going through it with a separate plugin
is a pain because you got a dig back in
time adding this little snippet and
hitting go fixes them across the board
and saves you a ton of time all right
so last thing I'll say is if this was
helpful in any way please give it a
thumbs up and click that red subscribe
button additionally if you have
questions about this or if anything was
confusing or any more clarification
please ask in the comments below
additionally we have a Facebook group
which is facebook.com slash groups slash
press Avenue or you can ask questions
about different tutorials plugins themes
recommendations etc we also throw in
news that's relevant to you know users
of the group or ourselves or WordPress
as a whole it's like psy grounds dumping
cpanel that might be relevant to you and
then other tutorials that were requested
and then lastly we do have a course
coming up on securing your WordPress
website with HTTPS that's where we fell
into this issue if you want more
information on that go to press
neucom to sign up for early bird deals
and coupons thanks again for watching