Do you want to use WordPress to center-align videos?
WordPress will automatically align your video to the left if its width is less than the available space for your article by default, leaving additional room on the right side.
This tutorial will demonstrate how simple it is to centre align a video in WordPress.
Why Center Align a Video in WordPress?
WordPress automatically aligns videos to the left by default when you embed them. This is because videos are external content that is incorporated in the content, making it impossible for WordPress to infer how you want to present it.
It automatically aligns it to the left as a best practise, leaving it up to you to change the alignment as necessary.
Users will enjoy a better viewing experience with your content if the video is centred. By doing this, you can avoid having a large blank space on one side of the page, which might make your document appear unprofessional.
The same issue will also occur if you upload videos straight to WordPress and their width is less than your content area. By default, WordPress will align them to the left.
Let’s now examine how simple it is to center-align a video on a WordPress website. Both the block editor and the classic editor will be covered.
How to Center Align Video in WordPress Content Editor
The best approach to do this is to directly enter a YouTube or Vimeo video URL in the WordPress content editor if you want your movie to fill the width of your content section.
You must first update an existing post or page or add a new one. Simply paste the video link once you are in the content editor. WordPress will automatically embed the video.
After choosing the video block, choose Adjust Alignment from the menu. You can pick the location of the movie from the dropdown menu.
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.
After that, you can preview and publish your page or post.
The video will now be center-aligned.
Yet, occasionally you might have to use the embed code for one reason or another. The embed code for your video must then be surrounded by some basic HTML.
The three dots symbols in the video block must first be clicked. You can then choose the ‘Edit as HTML’ option from the dropdown menu.
Next, you can enter the following piece of HTML code around the embed code of the video:
1
2
3
4
5
|
< 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.
You may now preview the post or page and save your changes. The centre of your content area will be neatly aligned with your video.
The width of your movie can also be manually increased to accommodate the content area. You must modify or add the “width” parameter to your embed code in order to accomplish this.
1
|
< 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:
1
2
3
4
5
|
< 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:
You can now preview and publish your page.
Simply visit your website to see the center-aligned video.
Our goal in writing this tutorial was to teach you how to centre align a video in WordPress. You might also want to check out our articles on the best WordPress plugins and how to start a blog in WordPress.