How to Center a Video in WordPress
There’s a lot of thought that goes into creating a blog post: the content is just the start. You also have to think about media content other than text, if you want to include it – and media-rich content is pretty much the norm nowadays. Walls of text are off-putting: best practices in website design dictate that text should be interspersed with pictures. But what about moving pictures?
If you’ve ever attempted to format a text containing images or other embedded content, you know how difficult it can be to get all the different elements to behave like you want them to. And WordPress, versatile as it is, has some limitations. Fortunately, there is also a wide range of helpful formatting options, irrespective of the editor you are using. Before we get into the how-to, though, we would like to discuss the reasons why you should even be bothering about centering a video in WordPress.
This is what we will be discussing:
Your content may be top-notch, but if it appears unprofessional at first glance, your visitors will be put off, some possibly even before they get into it. And you don’t want a high bounce rate or a poor user experience, do you?
If you embed a video into your content, and the video is less wide than the space allocated to your content, WordPress will sometimes align it to the left by default, leaving unused blank space to the right-hand side. This doesn’t look good for reasons which aren’t purely aesthetic: this makes your website look slapdash, amateurish, and poorly presented. Centering a video, on the other hand, makes your website look thought through at the very least. A large blank space is basically the only thing you should avoid.
Qode Themes: Top Picks
View Collection
WordPress’ default editor makes centering a video really easy: you can do it with a single click.
To add any video, simply click the plus sign to add a block and select a video block.
The Gutenberg video block has several possible video sources. You can Upload a video to your media library, use a video already in your Media Library, or Insert from URL. We will select Insert from URL, paste the URL, and click Apply.
Once your video is embedded, it should be centered by default. To make sure, click the Change alignment drop-down menu and select Align center.
And your video will now be centered. Note that other alignments are available, and provide different formatting results. A left or right alignment will also allow for text wrapping around the video, so you don’t get any unsightly blank space.
You can also embed video using an HTML block instead of a video one, in case you want more parameters to play with. To do that, click the plus sign to add a block and select the Custom HTML block.
The code you need to paste in order to imbed a video is this:
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper"> URL </div></figure>
Of course, you need to replace the letters URL in the above code with the URL of the video you wish to embed. This code will also only work for YouTube videos.
This code method should also result in a centered video by default. If it doesn‘t, you need to add the following parameter:
style="text-align: center;"
to the first div tag, like so:
Of course, you may have opted to disable Gutenberg for whatever reason. In that case, you are likely using the Classic editor. That is fine – you can also use the Classic editor to center your videos.
Starting in the Visual mode, you can simply embed a video by pasting the link. We will squeeze our URL between the paragraphs.
Your video will be automatically embedded.
In order to center a video, you will need to be editing a post or page in Text mode.
Once in Text mode, locate your embedded video. You should be able to recognize its URL.
In order to center your video, add this code above the video URL:
<div style="text-align: center;">
And this below:
</div>
And your video will be centered in the published version of the post. You can see your code at work if you take a look at the Visual tab of your editor.
And even if you use code to embed video for whatever reason, pasting the div tags above and below your embed code should still work.
Centering a video with Elementor is, as in Gutenberg, a default function for the most part. To add a video, simply drag a Video element from the left-hand side menu to where you want it in the post.
Once you have the element in place, paste the video URL into the Link field.
Your video should be centered by default. If it isn‘t, you will find the alignment controls in the Edit Column menu of your new video section.
The vertical and horizontal alignment can be changed in the Layout tab.
In Conclusion
And, easy as that, we have shown that there are several ways to center a video in WordPress, and any differences are mainly due to the editor you are using. Of course, this is only touching lightly upon formatting in WordPress. But of course, there are plenty of other options (using columns for formatting, for instance) which can affect the way embedded videos are presented to your users. We strongly encourage you to explore.
