How one can Heart Align a Video in WordPress

  • January 13, 2023
  • elkenz
  • 4 min read

Do you need to center-align a video in WordPress?

By default, in case your video’s width is lower than your article space, then WordPress routinely aligns it to the left, leaving further white house on the proper facet.

On this article, we’ll present you how one can simply middle align a video in WordPress.

How to center align a video in WordPress

Why Heart Align Movies in WordPress?

If you embed a video in WordPress, it routinely aligns them to the left by default. It is because movies are exterior content material embedded within the content material, so WordPress is unable to guess the way you want to show it.

As a greatest observe, it routinely aligns it to the left, leaving it as much as you to regulate the alignment if wanted.

By aligning the video to the middle, customers could have a greater expertise viewing your content material. This fashion, you received’t have noticeable clean house on the one facet of the web page, which might give an unprofessional look.

Apart from, in the event you add movies on to WordPress, the identical factor will occur to them if their width is lower than your content material space. WordPress will align them to the left by default.

That being mentioned, let’s see how one can simply center-align a video in a WordPress web site. We’ll cowl each the block editor and basic editor, so you may click on the hyperlinks under to leap forward to any part.

How one can Heart Align Video in WordPress Content Editor

If you would like your video to fill the width of your content material space, then one of the best ways to do that is by including a YouTube or Vimeo video URL immediately within the WordPress content material editor.

First, you’ll must edit a put up or a web page or add a brand new one. As soon as you might be within the content material editor, merely paste the hyperlink to the video. WordPress will embed the video routinely.

Paste video embed code in block editor

Subsequent, choose the video block after which click on the Change Alignment possibility. From the dropdown menu, you may select the place of the video.

WordPress enables you to select from the next alignments:

  • large width
  • full width
  • align left
  • align middle
  • align proper.

Go forward and choose the ‘Align middle’ possibility.

Align the video to the center

After that, you may preview and publish your web page or put up.

The video will now be center-aligned.

Center aligned video preview

Nonetheless, typically for one cause or one other, you could want to make use of the embed code. In that case, you have to so as to add some easy HTML round your video’s embed code.

First, you’ll want to click on the three dotted icons within the video block. After that, you may choose the ‘Edit as HTML’ possibility from the dropdown menu.

Edit as HTML

Subsequent, you may enter the next piece of HTML code across the embed code of the video:

<div fashion="text-align:middle;">

/// your video embed code goes right here

</div>

Right here’s what your embed code would appear to be with the customized HTML.

Preview of custom HTML code

Now you can save your adjustments and preview the put up or web page. Your video might be neatly aligned within the middle of your content material space.

One other method is to manually enhance your video’s width to suit the content material space. To attain this, you’ll want to add or change the ‘width’ parameter in your embed code.

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

How one can Heart Align Video within the Basic Editor

If you happen to’re utilizing the Basic editor, then you may middle align movies by enhancing a put up or creating a brand new one.

When you’re within the editor, swap to the Textual content view. Now enter the next HTML code:

<div fashion="text-align:middle;">

/// your video embed code goes right here

</div>

Simply ensure that to exchange ‘your video embed code goes right here’ along with your video’s embed code.

As soon as that’s accomplished, it’ll look one thing like this:

Center align videos in classic editor

Now you can preview and publish your web page.

Merely go to your web site to see the center-aligned video.

Center aligned video classic editor preview

We hope this text helped you learn to middle align a video in WordPress. You might also need to see our information on how one can begin a WordPress weblog and must-have WordPress plugins.

If you happen to appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can too discover us on Twitter and Fb.