If you’ve embedded videos in WordPress, then you might have noticed how WordPress automatically aligns the video to the left. This is even more so the case for Videos with Width larger than the post’s text area size. This might cause a jarring appearance to your posts and might feel badly arranged to users. A large space might appear right next to the video which causes a discomforting difference between the rest of your blog content.
However, this isn’t an issue with a workaround. In fact, the solution to this is quite simple as well. To this regard, today’s article on Beautiful Themes aims to help you center embedded videos in WordPress.
How to center a video in WordPress:
When you embed a video in WordPress either by using the Insert link tool or directly inserting the HTML, the video will be left aligned. To center align videos, you’ll need to use the <div> HTML tag. The Div tag exists to help you define a separate section on your posts
Now before we proceed, you’ll need the embed link to your videos. If you’re on youtube, simply click on Share under the Video title section and click on Embed. A simple embed link will be given on the right with extra options provided. This will be usually provided in the form of an Iframe tag. Copy this entire code by clicking on Copy and keep it saved somewhere, you’ll need it.
The process is similar for most video content sharing websites such as Vimeo and Dailymotion. A nifty share button alongside an embed option will be provided on them all. Now that we have our embed link, onto the section that helps you know how to center a video in WordPress after you embed the video.
Center Aligning a WordPress video using the Div tag
Now to center align your video, first, you need to open you Post and change from your Visual editor to the text editor. To do so, check the toolbar on your post edit screen on the right. Two buttons titled Visual and Text will be shown. Click on Text to change to your WordPress text editor.
Now to center align your video, you need to use the DIV tag
[html]<div style="text-align:center">
//Insert embed link here
</div>
[/html]Simply replace the “//Insert embed link here” with your copied embed link and this should center align your videos. If you want to see the effect of this code here, simply change back to the Visual editor by clicking on Visual again on the Toolbar.
If your video seems smaller or bigger than required, you can change its size by simply going back to the Text editor and changing the Width and Height on your embed link.
For example, your embed link might look like:
[html] <iframe width="560" height="315" src="https://www.youtube.com/embed/gx6hokAMH7o" allowfullscreen> </iframe>[/html]
Here simply remove the value inside double inverted commas for Width and Height to your requirement. For this demo, let’s change it to 900 width size and 600 height size. Then go back to the Visual editor to see the changes to video size.
If you want to learn more about Iframe embedding and Iframe tags in general, you can consider checking out this article which explains how embedding and using Iframes work on WordPress.
Concluding:
Thus, using this simple guide, you should have been able to learn how to center a video in WordPress. If you want to learn more about embedding and inserting various interactive content on your website, feel free to check out some of our other articles: