Introduction

With these tips, you can insert and centre a YouTube video in your responsive WordPress website to fit all the devices flawlessly.

In our editing life, there are times when we have to insert an iframe into our WordPress posts, where the most common case is inserting an embedded YouTube video.

For example, I want to embed this video in my post

https://www.youtube.com/watch?v=6FTUpceqWnc

On the YouTube page of that video, I click on Share button and then click to Embed tab. YouTube provides me with the following html code to put on my website

<iframe src="https://www.youtube.com/embed/6FTUpceqWnc" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Now it’s time to embed this iframe to my post.

First try

If I post the whole code to the Visual Editor, nothing happens and the raw code just appears there.

And when I switch to the Text Editor, I immediately know why: the html tags I pasted in have all been decoded.

Second try

Yeah you’ve got it! Of course I switch to the Text Editor and paste the code.

However, this video is placed on the left, while I expect it to be placed in the center.

So, I try to select the video and click on the Align Center button but it doesn’t work.

The working solution

Again, I switch to Text Editor, put in an wrapping div like below

<div style="text-align:center">
    <iframe src="https://www.youtube.com/embed/6FTUpceqWnc" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

What this code does is that it put a div that spans 100% across the width of the post, and then the code:

style="text-align:center"

makes the iframe stay in the center of the div, which also means the center of the post (because the div spans 100% across the width of the post).

Now the video goes in the center of the post, just as I want.

Now the video is aligned in the center of the post.

Do you have any tips on this? Share with us in the comment! 😀