YouTube is the best video sharing platform. Many bloggers want to insert YouTube video iframe or embed the video using default editor but they are having WordPress YouTube video not centered issue. This guide, we will show you how to center a YouTube video in WordPress.
Table of Contents
How to use default WordPress editor to center YouTube video?
You have 2 options to add YouTube video into WordPress CMS if you are using default WordPress editor
- YouTube embed link
- YouTube iframe code
How to center youtube embed in WordPress
Please click “share” link at the bottom right of the YouTube video and a new pop up will show. Copy that video url.
Then in default WordPress editor, click the + button at top left, the search box will show. Type YouTube in the search box, you will see YouTube block.
Paste the YouTube link you copy in the previous step and click the embed button.
The last step is click the 3 bar icon, choose align center. That’s it!
How to center youtube iframe in WordPress
At the bottom right of YouTube video, please click “share”. Then click the embed icon on the pop up and you will see this. Copy the entire iframe code. You will need that shortly.
In default editor, click the + button. Type html into the search box and add the custom html widget into your post.
Now paste the iframe code you copy just now into the html widget. At the beginning of the iframe code, please add
<div style="text-align:center;">The at the end of the iframe code, please add
</div>Your iframe code will look like this.
How to use plugin to center YouTube video?
Actually the trick is simple. You can stretch the YouTube video to full width in every devices automatically using WP YouTube Lyte. This plugin is free and have more than 30000 downloads. In your admin dashboard, go to plugins > add new > type the name of this plugin into the search box.
After you activated this plugin, go to the plugin setting section, enter your youtube API key there. You can register you YouTube API here at https://console.developers.google.com/project/
If you are struggling to get the YouTube API, please refer to the tutorial video below.
Player size, please choose 1280X720 (Maxi 16:9 player)
Player position, please choose center.
Cache thumbnails locally? Please choose YES.
This is really important to reduce JavaScript execution time. Core web vitals will be official ranking signal on MAY 2021. This plugin not only can help you center YouTube in your WordPress website but also will increase your google page speed score. Please refer to this awesome How to improve core web vitals guide.
How to use builder to center YouTube video?
You can use elementor, oxygen builder or any builders to center a YouTube video. The process is straight forward. This guide, we will use WPBakery Page Builder to do this. We favor WPBakery Page Builder because this builder already exist for a long time. The developer did an amazing job upgrading the plugin. The latest version 6.6 is super fast and our website get 99 mobile page speed score out of 100.
How to use builder to center Youtube video in pages
Firstly, you have to click add element. A pop up will show. You will see all WPBakery Page Builder blocks there. In the search box, type “Youtube”. This action will wipe off everything except YouTube block. Click on it. Video player settings will pop up.
Paste the video url there and the alignment dropbox, please choose center.
Now the YouTube video will be automatically center. Now you understand why many bloggers prefer to use builder? Builder make things easy for none tech guys.
How to use builder to center Youtube video in post
WPBakery Page Builder is de-activated in blog posts by default. You can activate it via WPBakery Page Builder > role manager. The post types section, choose custom and then the post, remember to tick it.
Now WPBakery Page Builder will load in your blog post and you can add YouTube blocks with the same instructions we provided above.
For your info, WPBakery Page Builder have two editing mode:
- Backend editor
- Frontend editor
The screenshots we took are backend editor. This mode might sound hard for you but this mode actually can load faster if compare to frontend editor mode.
Frontend editor is the exact matched to elementor where the builder will preview everything live for you. That’s why it will load slower. If you use image block, the builder have to load all your images while the backend editor only load the screenshot of the image. If you use background image, frontend editor will preview those images live for you while the backend editor will skip that.
We started our online journey since 2003. That time, builders do not exist. For your info, WPBakery Page Builder is the first builder for WordPress. We are a fan of it.
If you find this guide useful, please kindly share it into your social media. Thanks for reading. See you in our next guide.