How to horizontally center a youtube embed?

When you grab the Embed code from youtube, you will see something like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/txThpAtVJO4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The embed will look like exactly like this (assuming you don’t have any additional CSS affecting the styles):

As you can see it isn’t centered.

Center the Youtube embed

To center the youtube embed, add the following styles: style="display:block; margin:0 auto;".

The iframe code should now look like this:

<iframe style="display:block; margin:0 auto;" width="560" height="315" src="https://www.youtube.com/embed/txThpAtVJO4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The embed will look horizontally centered like so:


I hope this helps you center youtube videos in your blog posts/website.

Looking to learn how to code and make money online? Check out CodingPhase (referral link)