Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Beginner’s Guide: How to Center Align a Video in WordPress

Over the years at WPBeginner, we’ve created lots of videos and added them to our WordPress blog posts. However, we occasionally encountered issues center-aligning the videos when they were added to the article.

What we found was that if your video’s width is less than your article area, then WordPress automatically aligns it to the left, leaving extra white space on the right side. If you’re facing the same issue, then this guide is for you.

In this article, we will show you how to easily center align a video in WordPress.

How to center align a video in WordPress

Why Center Align Videos in WordPress?

When you embed a video in WordPress, it automatically aligns to the left by default. This is because videos are external content embedded in the content, so WordPress is unable to guess how you would like to display it.

As a best practice, it automatically aligns it to the left, leaving it up to you to adjust the alignment if needed.

By aligning the video to the center, users will have a better experience viewing your content. This way, you won’t have noticeable blank space on the one side of the page, which could give an unprofessional look.

Besides, if you upload videos directly to WordPress, the same thing will happen to them if their width is less than your content area. WordPress will align them to the left by default.

That being said, let’s see how you can easily center-align a video in a WordPress website. We will cover both the block editor and classic editor, so you can click the links below to jump ahead to any section.

How to Center Align Video in WordPress Content Editor

If you want your video to fill the width of your content area, then the best way to do this is by adding a YouTube or Vimeo video URL directly in the WordPress content editor.

First, you’ll need to edit a post or a page or add a new one. Once you are in the content editor, simply paste the link to the video. WordPress will embed the video automatically.

Paste video embed code in block editor

Next, select the Video block and then click the ‘Change Alignment’ option. From the dropdown menu, you can choose the position of the video.

WordPress lets you choose from the following alignments:

  • wide width
  • full width
  • align left
  • align center
  • align right.

Go ahead and select the ‘Align center’ option.

Align the video to the center

After that, you can preview and publish your page or post.

The video will now be center-aligned.

Center aligned video preview

However, for one reason or another, you may need to use the embed code. In that case, you will need to add some simple HTML around your video’s embed code.

First, you need to click the 3 dotted icons in the video block. After that, you can select the ‘Edit as HTML’ option from the dropdown menu.

Edit as HTML

Next, you can enter the following piece of HTML code around the embed code of the video:

<div style="text-align:center;">

/// your video embed code goes here

</div>

Here’s what your embed code would look like with the custom HTML.

Preview of custom HTML code

You can now save your changes and preview the post or page. Now you know how to center a video in HTML.

Another approach is to manually increase your video’s width to fit the content area. To achieve this, you need to add or change the ‘width’ parameter in your embed code.

<iframe width="760" height="315" src="https://www.youtube.com/embed/4YpyiJ05YOg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

How to Center Align Video in the Classic Editor

If you’re using the Classic editor, then you can center-align videos by editing a post or creating a new one.

Once you’re in the editor, switch to the Text view. Now enter the following HTML code:

<div style="text-align:center;">

/// your video embed code goes here

</div>

Just make sure to replace ‘your video embed code goes here’ with your video’s embed code.

Once that’s done, it will look something like this:

Center align videos in classic editor

You can now preview and publish your page.

Simply visit your website to see the center-aligned video.

Center aligned video classic editor preview

We hope this article helped you learn how to center align a video in WordPress. You may also want to see our guide on how to add special characters in WordPress posts and essential tips for using shortcodes in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

20 CommentsLeave a Reply

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. David Lim

    Thanks, this is the arcicle I was looking for. Just solved my problem.

  3. A Owadud Bhuiyan

    if I have three YouTube videos, can I show them in the same row by adjusting the width?

    Thanks for the tips.

  4. Tom Z

    Thanks for posting this, it worked and was very helpful!

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Admin

  5. Marc

    Thanks for the info!! :)

    • WPBeginner Support

      You’re welcome!

      Admin

  6. S

    I’m trying to center a gif that I’ve embedded and the new editor doesn’t let me edit the HTML of this type of content. How can I center this?

  7. Diane

    How does this work when using the Gutenberg Editor’s You Tube embed block? I tried both ways you described, but either are working.

    • WPBeginner Support

      With the YouTube embed block there should be a section when you select the block to set a specific alignment that you can use.

      Admin

  8. Marshall

    The tip sounds great, but every time I “save” and come back, it’s gone.

    • WPBeginner Support

      You may want to try to clear any caching on your site to ensure you’re not seeing the cached version of the page.

      Admin

  9. Himanshu

    You offer a lot of outstanding tricks and videos to go along. I have subscribed to your email newsletter and have seen many videos for my new website. However, your trick on aligning the video on the center did not work. Here is the issue: I shot a 15-sec video on iPhone converted into mp4 and uploaded on my host server, shows up in my WordPress galley. Since the video occupies the entire width, I changed the video width and height to a 1/3 each. Then I pasted the align center code you showed on your video at https://www.wpbeginner.com/beginners-guide/beginners-guide-how-to-center-align-a-video-in-wordpress/#respond

    But the video does not align in the center. When I look at the video in the frontend editor, I see a box with a blue line that occupies the entire width even when the video is 1/3 the width. Looks like this blue line box cannot be made smaller with any code. Is that true? Any tricks in your bag of trick that you can share?

    You have been great and thanks for your videos. you made my life so much easier.

    • WPBeginner Support

      Hi Himanshu,

      You can try switching to the HTML editor to add the code. Hopefully it would work then.

      Admin

  10. Young

    thank you for the article! very helpful

  11. Deb

    Thank you, this article was very helpful!

  12. Carole

    Adding the div html around the embed code worked like a charm. Thanks!

  13. bilikid

    Thanks for this. Definitely plan on trying it!!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.